@extends('admin.layouts.layouts')

@section('title', 'View Expanse Request')

@section('page-css')
    <style>
        .details-table tr {
            border-bottom: 1px solid #e0e0ef;
        }

        .details-table th {
            width: 24%;
        }

        .details-table audio {
            height: 35px;
            width: 80%;
        }

        .ticket-images {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
            gap: 10px;
        }

        .ticket-img,
        .ticket-no-img {
            width: 100%;
            aspect-ratio: 1/1;
            border-radius: 5px;
            box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
            overflow: hidden;
        }

        .ticket-img img {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover;
            border-radius: 5px !important;
        }

        .ticket-no-img {
            background: #392c70;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .ticket-no-img i {
            font-size: 30px;
            color: #ffffff;
        }

        .user-img {
            width: 60px;
            height: 60px;
            object-fit: cover;
            border-radius: 50% !important;
        }
    </style>
@endsection

@section('content')
    <div class="page-header">
        <h3 class="page-title">
            Expanse Request
        </h3>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item" aria-current="page">Accounts</li>
                <li class="breadcrumb-item"><a href="{{ route('employee-expanse-request.index') }}">Expanse Request</a></li>
                <li class="breadcrumb-item active" aria-current="page">View</li>
            </ol>
        </nav>
    </div>
    <div class="container py-4">
        <div class="card shadow-sm rounded border-0">
            <div class="card-header bg-light d-flex justify-content-between align-items-center">
                <h5 class="mb-0 fw-bold">View Expanse Request</h5>
                <a href="{{ route('employee-expanse-request.index') }}" class="btn btn-primary btn-sm">
                    &larr; Back
                </a>
            </div>
            <div class="card-body bg-white">
                <div class="row">
                    <div class="col-md-6">
                        <div class="row mb-2">
                            <div class="col-md-6"><b>Employee Name:</b></div>
                            <div class="col-md-6">{{ $showDetails->employeeMaster->employee_name ?? '-' }}</div>
                        </div>

                        <div class="row mb-2">
                            <div class="col-md-6"><b>Expanse Type:</b></div>
                            <div class="col-md-6">{{ $showDetails->expanseType->name ?? '' }}</div>
                        </div>

                        <div class="row mb-2">
                            <div class="col-md-6"><b>Expanse Sub Type:</b></div>
                            <div class="col-md-6">{{ $showDetails->expanseSubType->name ?? '' }}</div>
                        </div>

                        <div class="row mb-2">
                            <div class="col-md-6"><b>Transaction Type:</b></div>
                            <div class="col-md-6">{{ $showDetails->transaction_type ?? '-' }}</div>
                        </div>

                        <div class="row mb-2">
                            <div class="col-md-6"><b>Created At:</b></div>
                            <div class="col-md-6">{{ $showDetails->created_at->format('d-m-Y h:i A') ?? '' }}</div>
                        </div>

                        @can('employee-expanse-request-status')
                            <div class="row mb-2">
                                <div class="col-md-6"><b>Status:</b></div>
                                <div class="col-md-6">
                                    <div class="btn-group">
                                        <button type="button"
                                            class="btn btn-{{ $showDetails->status == '0' ? 'info' : ($showDetails->status == '1' ? 'success' : ($showDetails->status == '3' ? 'danger' : '')) }}" {{ $showDetails->status == '3' ? 'disabled' : '' }}>{{ $showDetails->status == '0' ? 'Requested' : ($showDetails->status == '1' ? 'Approved' : ($showDetails->status == '3' ? 'Rejected' : '')) }}</button>
                                        <button type="button"
                                            class="btn btn-{{ $showDetails->status == '0' ? 'info' : ($showDetails->status == '1' ? 'success' : ($showDetails->status == '3' ? 'danger' : '')) }} dropdown-toggle dropdown-toggle-split"
                                            id="dropdownMenuSplitButton5" data-toggle="dropdown" aria-haspopup="true"
                                            aria-expanded="false" {{ $showDetails->status == '3' ? 'disabled' : '' }}>
                                            <span class="sr-only">Toggle Dropdown</span>
                                        </button>
                                        <div class="dropdown-menu" aria-labelledby="dropdownMenuSplitButton5">
                                            <h5 class="dropdown-header">Select Status</h5>
                                            <a class="dropdown-item set-status" href="#" data-status="0">Requested</a>
                                            <a class="dropdown-item set-status" href="#" data-status="1">Approved</a>
                                            <a class="dropdown-item set-status" href="#" data-status="3">Rejected</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endcan
                    </div>
                    <div class="col-md-6">
                        <div class="row mb-2">
                            <div class="col-md-6"><b>Date:</b></div>
                            <div class="col-md-6">{{ date('d-m-Y', strtotime($showDetails->date)) ?? '-' }}</div>
                        </div>

                        <div class="row mb-2">
                            <div class="col-md-6"><b>Amount:</b></div>
                            <div class="col-md-6">{{ $showDetails->amount ?? '-' }}</div>
                        </div>

                        <div class="row mb-2">
                            <div class="col-md-6"><b>Mode Of Payment:</b></div>
                            <div class="col-md-6">{{ $showDetails->mode_of_payment ?? '-' }}</div>
                        </div>

                        <div class="row mb-2">
                            <div class="col-md-6"><b>Created By:</b></div>
                            <div class="col-md-6">{{ $showDetails->users->name ?? '-' }}</div>
                        </div>

                        <div class="row mb-2">
                            <div class="col-md-6"><b>Document:</b></div>
                            <div class="col-md-6">
                                @if ($showDetails->document)
                                    <a href="{{ asset('storage/' . $showDetails->document) }}" class="btn btn-primary"
                                        download>
                                        <i class="fa fa-download"></i>
                                    </a>
                                @else
                                    <span class="text-muted">No document available</span>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                  @if (isset($showDetails->expenseImages) && count($showDetails->expenseImages) > 0)
                    <div class="row">
                        <div class="col-md-12">
                            <div class="table-responsive">
                                <table class="table details-table">
                                    <tbody>
                                        <tr>
                                            <th>Attachments</th>
                                            <td>
                                                @if (isset($showDetails->expenseImages) && count($showDetails->expenseImages) > 0)
                                                    <div class="ticket-image-main">
                                                        <div class="ticket-images">
                                                            @foreach ($showDetails->expenseImages as $expenseImage)
                                                                @if (!empty($expenseImage->attachment))
                                                                    @if ($expenseImage->extension == '.heic' || $expenseImage->extension == '.heif')
                                                                        <a href="{{ asset('storage/' . $expenseImage->attachment) }}"
                                                                            download>
                                                                            <div class="ticket-no-img">
                                                                                <i class="fa fa-download"></i>
                                                                            </div>
                                                                        </a>
                                                                    @else
                                                                        <div class="ticket-img">
                                                                            @if (file_exists('storage/' . $expenseImage->attachment))
                                                                                <img
                                                                                    src="{{ asset('storage/' . $expenseImage->attachment) }}" class="gallery-img" data-src="{{ asset('storage/' . $expenseImage->attachment) }}" style="cursor: pointer;">
                                                                            @else
                                                                                <img src="{{ asset('assets/images/noimage/no-image.jpeg') }}"
                                                                                    alt="">
                                                                            @endif
                                                                        </div>
                                                                    @endif
                                                                @endif
                                                            @endforeach
                                                        </div>
                                                    </div>
                                                @endif
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <div class="container py-4">
        <div class="card shadow-sm rounded border-0">
            <div class="card-header bg-light d-flex justify-content-between align-items-center">
                <h5 class="mb-0 fw-bold">Expense History</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-12">
                        <div class="table-responsive">
                            <table id="expense-history-table" class="table w-100">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>Status</th>
                                        <th>Remark</th>
                                        <th>Created Date</th>
                                        <th>Created By</th>
                                        <th>Updated Date</th>
                                        <th>Updated By</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Image View Modal --}}
    <div id="imageModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="imageModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-md" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="imageModalLabel">Image Preview</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body text-center">
                    <img src="" id="modalImage" class="img-fluid" alt="Image Preview">
                </div>
            </div>
        </div>
    </div>

    {{-- Expense Status modal --}}
    <div class="modal fade" id="expenseStatusModal" tabindex="-1" role="dialog" aria-labelledby="expenseStatusModalLabel"
        aria-hidden="true" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="expenseStatusModalLabel">Expense Status</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form method="POST" id="expenseStatusForm" action="javascript:void(0)">
                    @csrf
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <input type="hidden" name="status" id="statusValue">
                                    <label for="remark" class="form-label">
                                        Remark <span class="text-danger">*</span>
                                    </label>
                                    <textarea type="text" class="form-control" id="remark" name="remark"
                                        placeholder="Enter Remark" data-parsley-required rows="4" data-parsley-trigger='keyup'
                                        data-parsley-required-message="Please enter remark."
                                        data-parsley-errors-container='#remark_error'></textarea>
                                <span class="text-danger error-msg" id="remark_error">{{ $errors->first('remark') }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary" id="expenseStatusBtn">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('page-js')
    <script type="text/javascript">
        var expanseRequestAjaxList = "{{ route('employee-expanse-request-ajax') }}";
        var expanseRequestId = "{{ $showDetails->id }}";
        var expanseRequestStatus = "{{ route('employee-expanse-request-status') }}";
        var expenseHistoryURL = "{{ route('expense-history-list') }}";
        var employeeExpenseURL = "{{ route('employee-expanse.index') }}";
    </script>
    <script src="{{ asset('assets/js/admin/expanse-request.js') }}"></script>
@endsection