@extends('admin.layouts.layouts')

@section('title', 'Details | Travel Desk')

@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">
            Travel Desk
        </h3>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ route('travel-desk.index') }}">Travel Desk</a></li>
                <li class="breadcrumb-item active" aria-current="page">Details</li>
            </ol>
        </nav>
    </div>

    {{-- Travel Plan Details --}}
    <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">Travel Plan Details</h5>
            <div class="d-flex align-items-center">
                <a href="{{ route('travel-desk.index') }}" class="btn btn-primary btn-sm">
                    <i class="fa fa-arrow-left"></i> Back
                </a>
            </div>
        </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>Type:</b></div>
                        <div class="col-md-6">{{ $showDetails->type ?? '-' }}</div>
                    </div>

                    <div class="row mb-2">
                        <div class="col-md-6"><b>Send to Travel Desk:</b></div>
                        <div class="col-md-6 paid-amount-row">{{ $showDetails->send_to_travel_desk === 0 ? 'No' : 'Yes' }}
                        </div>
                    </div>

                    @php
                        $statuses = [
                            'Reporting Approved' => ['label' => 'Reporting Approved', 'class' => 'success'],
                            'Booking Done' => ['label' => 'Booking Done', 'class' => 'primary'],
                            'Cancelled' => ['label' => 'Cancelled', 'class' => 'danger'],
                        ];

                        $status = $statuses[$showDetails->status] ?? ['label' => '', 'class' => ''];
                        $disabled = in_array($showDetails->status, ['Cancelled']) ? 'disabled' : '';

                        $canChangeStatus = false;
                        $currentUser = auth()->user();

                        // Check if current user is Super Admin
                        $currentUser = auth()->user();

                        // Allow only if user is Super Admin OR has travel-desk-list permission
                        $canChangeStatus =
                            $currentUser->hasRole('Super Admin') || $currentUser->can('travel-desk-list');
                    @endphp

                    <div class="row mb-2">
                        <div class="col-md-6"><b>Status:</b></div>
                        <div class="col-md-6">
                            @if ($canChangeStatus)
                                <div class="btn-group">
                                    <button type="button" class="btn btn-{{ $status['class'] }}" {{ $disabled }}>
                                        {{ $status['label'] }}
                                    </button>
                                    <button type="button"
                                        class="btn btn-{{ $status['class'] }} dropdown-toggle dropdown-toggle-split"
                                        id="dropdownMenuSplitButton5" data-toggle="dropdown" aria-haspopup="true"
                                        aria-expanded="false" {{ $disabled }}>
                                        <span class="sr-only">Toggle Dropdown</span>
                                    </button>
                                    <div class="dropdown-menu" aria-labelledby="dropdownMenuSplitButton5">
                                        <h5 class="dropdown-header">Change Status</h5>
                                        @if ($showDetails->status === 'Booking Done')
                                            <a class="dropdown-item set-status" href="#"
                                                data-status="Cancelled">Cancelled</a>
                                        @else
                                            <a class="dropdown-item set-status" href="#"
                                                data-status="Booking Done">Booking Done</a>
                                        @endif
                                    </div>
                                </div>
                            @else
                                <span class="badge badge-{{ $status['class'] }} badge-pill">{{ $status['label'] }}</span>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="row mb-2">
                        <div class="col-md-6"><b>Destination Type:</b></div>
                        <div class="col-md-6 paid-amount-row">{{ $showDetails->destination_type ?? '-' }}</div>
                    </div>

                    <div class="row mb-2">
                        <div class="col-md-6"><b>Travel Plan Period:</b></div>
                        <div class="col-md-6">{{ date('d-m-Y', strtotime($showDetails->start_date)) }} To
                            {{ date('d-m-Y', strtotime($showDetails->end_date)) }}</div>
                    </div>

                    <div class="row mb-2">
                        <div class="col-md-6"><b>Mod Of Travel:</b></div>
                        <div class="col-md-6 paid-amount-row">{{ $showDetails->getModOfTravelNamesAttribute() ?? '-' }}
                        </div>
                    </div>

                    <div class="row mb-2">
                        <div class="col-md-6"><b>Current Expense Limit:</b></div>
                        <div class="col-md-6 paid-amount-row">
                            {{ number_format($remainingExpenseLimit, 2, '.', '') ?? '-' }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Travel Plan Items --}}
    <div class="card shadow-sm rounded border-0 mt-4">
        <div class="card-header bg-light d-flex justify-content-between align-items-center">
            <h5 class="mb-0 fw-bold">Travel Plan Items</h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-sm w-100">
                    <thead>
                        <tr>
                            <th>Start Date</th>
                            <th>End Date</th>
                            <th class="text-truncate" style="max-width: 100px;">Purpose</th>
                            <th style="max-width: 100px;">Name Of Destination</th>
                            @if ($showDetails->destination_type == 'National')
                                <th>State</th>
                                <th>District</th>
                                <th>Sub District</th>
                                <th>City</th>
                            @else
                                <th>Country</th>
                            @endif
                            <th class="text-truncate" style="max-width: 100px;">Remark</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if (count($showDetails->travelDetails) > 0)
                            @foreach ($showDetails->travelDetails as $travelDetail)
                                <tr>
                                    <td class="fs-6">{{ date('d-m-Y', strtotime($travelDetail->start_date)) }}</td>
                                    <td class="fs-6">{{ date('d-m-Y', strtotime($travelDetail->end_date)) }}</td>
                                    <td class="text-truncate fs-6" style="max-width: 100px;">
                                        {{ $travelDetail->purpose?->name }}</td>
                                    <td class="text-truncate fs-6" style="max-width: 100px;">
                                        {{ $travelDetail->destination_name }}</td>
                                    @if ($showDetails->destination_type == 'National')
                                        <td class="fs-6">{{ $travelDetail->stateDetail?->state_name ?? '' }}</td>
                                        <td class="fs-6">{{ $travelDetail->districtDetail?->district_name ?? '' }}</td>
                                        <td class="fs-6">{{ $travelDetail->subDistrictDetail?->sub_district_name ?? '' }}
                                        </td>
                                        <td class="fs-6">{{ $travelDetail->cityDetail?->city_name ?? '' }}</td>
                                    @else
                                        <td class="fs-6">{{ $travelDetail->countryDetail?->country_name ?? '' }}</td>
                                    @endif
                                    <td class="fs-6" style="max-width: 160px; text-align: justify;">
                                        {{ $travelDetail->remark }}</td>
                                    <td>
                                        <div style="display: flex;">
                                            <button type="button" class="btn btn-info btn-icon btn-sm edit-btn"
                                                title="Upload Ticket" data-id="{{ $travelDetail->id }}">
                                                <i class="fa-solid fa-ticket"></i>
                                            </button>
                                            @if (isset($travelDetail->files))
                                                <a href="{{ asset('storage/' . $travelDetail->files) }}"
                                                    class="btn btn-primary btn-icon btn-sm img-thumbnail ml-2"
                                                    title="Download Ticket" download="{{ $travelDetail->files_basename }}">
                                                    <i class="fa fa-download mt-1"></i>
                                                </a>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        @else
                            <tr>
                                <td colspan="10" class="fs-6">No Records Found</td>
                            </tr>
                        @endif
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    {{-- Travel Plan Histories --}}
    <div class="card shadow-sm rounded border-0 mt-4">
        <div class="card-header bg-light d-flex justify-content-between align-items-center">
            <h5 class="mb-0 fw-bold">Travel Plan Histories</h5>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-12">
                    <div class="table-responsive">
                        <table id="travel-plan-history-table" class="table w-100">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Status</th>
                                    <th>Remark</th>
                                    <th>Action Date</th>
                                    <th>Action By</th>
                                    <th>Attachment</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Upload Ticket Modal --}}
    <div class="modal fade" id="bookedTicketsModal" tabindex="-1" role="dialog"
        aria-labelledby="bookedTicketsModalLabel1" 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="bookedTicketsModalLabel">Upload Ticket</h5>
                    <button type="button" class="close" onclick="resetForm();" data-dismiss="modal"
                        aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form method="POST" id="bookedTicketsForm" action="javascript:void(0)" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="id" id="ticket_detail_id">
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="files" class="form-label">Ticket <span class="text-danger">*</span></label>
                            <input type="file" name="files" id="files" class="form-control"
                                data-parsley-trigger="keyup" data-parsley-required
                                data-parsley-required-message="Please upload ticket"
                                data-parsley-fileextension="jpg,jpeg,png,pdf,doc,docx"
                                data-parsley-fileextension-message="Only .pdf, .doc, .docx, .png, .jpg and .jpeg files are allowed."
                                data-parsley-errors-container='#files_error'>
                            <span class="text-danger" id="image_error">{{ $errors->first('image') }}</span>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary" id="modalSubmitBtn">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Upload Ticket Modal --}}
    <div class="modal fade" id="bookingModal" tabindex="-1" role="dialog" aria-labelledby="bookingModalLabel1"
        aria-hidden="true" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="bookingModalLabel">Add Expense</h5>
                    <button type="button" class="close" onclick="resetForm();" data-dismiss="modal"
                        aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form method="POST" id="bookingForm" action="javascript:void(0)" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="id" id="ticket_id">
                    <input type="hidden" name="status" id="status">
                    <div class="modal-body">
                        <div class="row bookingDoneClass">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="date" class="form-label">Date <span
                                            class="text-danger">*</span></label>
                                    <input type="text" name="date" id="date"
                                        class="form-control travelDeskDate" value="{{ old('date') }}"
                                        placeholder="Select Date" data-parsley-trigger='keyup' data-parsley-datecustom
                                        data-parsley-errors-container='#end_date_error'>
                                    <span class="text-danger error-msg"
                                        id="date_error">{{ $errors->first('date') }}</span>
                                </div>
                            </div>

                            <div class="col-md-3">
                                <div class="form-group">
                                    <label class="form-label">Expense Type <span class="text-danger">*</span></label>
                                    <select class="form-control expenseTypeSelect" name="expense_type" id="expense_type"
                                        data-parsley-trigger="keyup" data-parsley-required
                                        data-parsley-required-message="Please select expense type"
                                        data-parsley-errors-container='#expense_type_error'>
                                        <option value="">Select Expense Type</option>
                                        @foreach ($expense_types as $expense_type)
                                            <option value="{{ $expense_type->id }}"
                                                {{ old('expense_type') == $expense_type->id ? 'selected' : '' }}>
                                                {{ $expense_type->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <span class="text-danger error-msg"
                                        id="expense_type_error">{{ $errors->first('expense_type') }}</span>
                                </div>
                            </div>

                            <div class="col-md-3">
                                <div class="form-group">
                                    <label class="form-label">Expense Sub Type <span class="text-danger">*</span></label>
                                    <select class="form-control expenseSubTypeSelect" name="expense_sub_type"
                                        id="expense_sub_type" data-parsley-trigger="keyup" data-parsley-required
                                        data-parsley-required-message="Please select expense type"
                                        data-parsley-errors-container='#expense_sub_type_error'>
                                        <option value="">Select Expense Sub Type</option>
                                    </select>
                                    <span class="text-danger error-msg"
                                        id="expense_sub_type_error">{{ $errors->first('expense_sub_type') }}</span>
                                </div>
                            </div>

                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="amount" class="form-label">Amount <span
                                            class="text-danger">*</span></label>
                                    <input type="text" name="amount" id="amount"
                                        class="form-control rate-input amount" placeholder="Enter Amount"
                                        value="{{ old('amount') }}" maxlength="15" data-parsley-trigger='keyup'
                                        data-parsley-required data-parsley-required-message="Please enter amount"
                                        data-parsley-pattern="^\d+(\.\d{0,2})?$"
                                        data-parsley-pattern-message="Please enter a valid amount"
                                        data-parsley-errors-container='#amount_error'>
                                    <span class="text-danger" id="amount_error">{{ $errors->first('amount') }}</span>
                                </div>
                            </div>

                            <div class="col-md-3">
                                <div class="form-group">
                                    <label class="form-label">Payment Mode <span class="text-danger">*</span></label>
                                    <select class="form-control payment_mode" name="payment_mode" id="payment_mode"
                                        data-parsley-trigger="keyup" data-parsley-required
                                        data-parsley-required-message="Please select payment mode"
                                        data-parsley-errors-container='#payment_mode_error'>
                                        <option value="">Select Payment Mode</option>
                                        <option value="Cash">Cash</option>
                                        <option value="Online">Online</option>
                                    </select>
                                    <span class="text-danger error-msg"
                                        id="payment_mode_error">{{ $errors->first('payment_mode') }}</span>
                                </div>
                            </div>

                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="document" class="form-label">Document <span
                                            class="text-danger">*</span></label>
                                    <input type="file" name="document" id="document" class="form-control"
                                        data-parsley-trigger="keyup" data-parsley-required
                                        accept="image/jpg, image/jpeg, image/png"
                                        data-parsley-required-message="Please upload document"
                                        data-parsley-max-file-size = "5"
                                        data-parsley-max-file-size-message = "File size must not exceed 5 MB."
                                        data-parsley-fileextension="jpg,jpeg,png"
                                        data-parsley-fileextension-message="Only .png, .jpg and .jpeg document are allowed."
                                        data-parsley-errors-container='#document_error'>
                                    <span class="text-danger" id="image_error">{{ $errors->first('document') }}</span>
                                </div>
                            </div>

                            <div class="col-md-3">
                                <div class="form-group">
                                    <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"
                                        rows="4" data-parsley-required data-parsley-trigger='keyup'
                                        data-parsley-required-message="Please enter remark." data-parsley-errors-container='#remark_error'></textarea>
                                    <div class="invalid-feedback" id="remark_error">{{ $errors->first('remark') }}</div>
                                </div>
                            </div>
                        </div>

                        <div class="row cancelledClass">
                            <div class="col-md-12">
                                <input type="hidden" name="expense_id" id="expense_id"
                                    value="{{ $showDetails->expenses?->id }}">
                                <div class="form-group">
                                    <label for="cancel_remark" class="form-label">Remark <span
                                            class="text-danger">*</span></label>
                                    <textarea type="text" class="form-control" id="cancel_remark" name="cancel_remark" placeholder="Enter Remark"
                                        rows="4" data-parsley-required data-parsley-trigger='keyup'
                                        data-parsley-required-message="Please enter remark." data-parsley-errors-container='#cancel_remark_error'></textarea>
                                    <span class="text-danger error-msg"
                                        id="cancel_remark_error">{{ $errors->first('cancel_remark') }}</span>
                                </div>
                                <div class="form-group">
                                    <label for="paid_amount" class="form-label">Actual Amount <span
                                            class="text-danger">*</span></label>
                                    <input type="text" class="form-control amount" id="actual_amount"
                                        value="{{ $showDetails->expenses?->total_amount }}" readonly>
                                </div>
                                <div class="form-group">
                                    <label for="paid_amount" class="form-label">Paid Amount <span
                                            class="text-danger">*</span></label>
                                    <input type="text" class="form-control amount" id="paid_amount"
                                        name="paid_amount" placeholder="Enter Paid Amount" data-parsley-required
                                        data-parsley-trigger='keyup'
                                        data-parsley-required-message="Please enter paid amount."
                                        data-parsley-max-amount="true" data-parsley-errors-container='#paid_amount_error'>
                                    <span class="text-danger error-msg" id="paid_amount_error"></span>
                                </div>

                                <div class="form-group">
                                    <label for="attachment" class="form-label">Attachment <span
                                            class="text-danger">*</span></label>
                                    <input type="file" name="attachment" id="attachment" class="form-control"
                                        data-parsley-trigger="keyup" data-parsley-required
                                        data-parsley-required-message="Please upload attachment"
                                        data-parsley-fileextension="jpg,jpeg,png"
                                        accept="image/jpg, image/jpeg, image/png"
                                        data-parsley-errors-container='#attachment_error'>
                                    <span class="text-danger"
                                        id="attachment_error">{{ $errors->first('attachment') }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary" id="modalBookingSubmitBtn">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('page-js')
    <script type="text/javascript">
        var travelPlanID = "{{ $showDetails->id }}";
        var travelPlanDetails = "{{ route('travel-plan.detail-list') }}";
        var travelPlanHistory = "{{ route('travel-plan.history-list') }}";
        var travelBookingUpload = "{{ route('travel-desk.booking-upload') }}";
        var statusRoute = "{{ route('travel-desk-request.status') }}";
        var subTypesRoute = "{{ route('expense-sub-type.sub-types-of-expense-type') }}";
    </script>
    <script src="{{ asset('assets/js/admin/travel-desk.js') }}"></script>
@endsection