@extends('layouts.vertical', ['page_title' => 'View'])

@section('css')
    <link href="{{ asset('assets/libs/datatables/datatables.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.css') }}" rel="stylesheet"
        type="text/css" />
    <link href="{{ URL::asset('assets/libs/flatpickr/flatpickr.min.css') }}" rel="stylesheet" type="text/css" />
    <style>
        .card-box {
            background-color: #fff;
            padding: 1.5rem;
            box-shadow: 0 0.75rem 6rem rgba(56, 65, 74, 0.03);
            margin-bottom: 24px;
            border-radius: 0.25rem;
        }
    </style>
@endsection

@section('content')
    <div class="container-fluid">

        <div class="row pb-2">

            @php
                $queryParams = http_build_query([
                    'state' => is_array(request('state')) ? request('state')[0] ?? '' : request('state'),
                    'status' => is_array(request('status')) ? request('status')[0] ?? '' : request('status'),
                    'from_date' => is_array(request('from_date'))
                        ? request('from_date')[0] ?? ''
                        : request('from_date'),
                    'to_date' => is_array(request('to_date')) ? request('to_date')[0] ?? '' : request('to_date'),
                    'requesttype' => 'view',
                ]);

                // Helper function to safely output values (handle arrays)
                if (!function_exists('safeOutput')) {
                    function safeOutput($value)
                    {
                        if (is_array($value)) {
                            return json_encode($value);
                        }
                        return $value ?? '';
                    }
                }
            @endphp

            <div class="row align-items-center g-2 mb-2">

            <div class="col-md-6">
                <div class="d-flex align-items-center gap-2 flex-wrap">
                    RequestID:
                    <span class="fw-semibold">
                        {{ is_array($item->id ?? null) ? json_encode($item->id) : $item->id ?? '' }}
                    </span>

                    <span class="text-muted">|</span>

                    Status:
                    <span class="badge bg-info fs-6 px-2 py-1">{{ $item->status }}</span>
                </div>
            </div>

            <div class="col-md-6">
                <form method="post" action="/neblogisticreport/editreport" id="form-availiblity"
                    class="d-flex align-items-center justify-content-md-end gap-2 flex-wrap">

                    @csrf

                    <input type="hidden" name="user_id" id="field-user_id"
                        value="{{ is_array($item->emp_id ?? null) ? json_encode($item->emp_id) : $item->emp_id ?? '' }}">

                    <input type="hidden" name="record_id" id="field-record_id"
                        value="{{ is_array($item->id ?? null) ? json_encode($item->id) : $item->id ?? '' }}">

                    <input type="hidden" name="emp_id" id="field-emp_id"
                        value="{{ is_array($item->emp_id ?? null) ? json_encode($item->emp_id) : $item->emp_id ?? '' }}">

                    <input type="hidden" name="submission_id" id="field-submission_id"
                        value="{{ is_array($item->submission_id ?? null) ? json_encode($item->submission_id) : $item->submission_id ?? '' }}">

                    <input type="hidden" name="id"
                        value="{{ is_array($item->id ?? null) ? json_encode($item->id) : $item->id ?? '' }}">

                    <input type="hidden" name="abm_email"
                        value="{{ is_array($item->abm_email ?? null) ? json_encode($item->abm_email) : $item->abm_email ?? '' }}">

                    <input type="hidden" name="check_approve_after_reject" id="field-check_approve_after_reject"
                        value="{{ $item->status }}">

                    <select class="form-select form-select-sm" name="status" id="status-select" style="width: 190px;">
                        <option value="">Select Status</option>
                        <option value="Requested"  {{ $item->status == 'Requested' ? 'selected' : '' }}>Requested</option>
                        <option value="Approved"   {{ $item->status == 'Approved' ? 'selected' : '' }}>Approved</option>
                        <option value="Rejected"   {{ $item->status == 'Rejected' ? 'selected' : '' }}>Rejected</option>
                        <option value="Dispatched" {{ $item->status == 'Dispatched' ? 'selected' : '' }}>Dispatched</option>
                        <option value="Returned"   {{ $item->status == 'Returned' ? 'selected' : '' }}>Returned</option>
                        <option value="Delivered"  {{ $item->status == 'Delivered' ? 'selected' : '' }}>Delivered</option>
                    </select>

                    <button class="btn btn-sm btn-dark" type="submit">Change</button>

                    <a href="{{ url('/neblogisticreport/viewprevreportbyid') }}?id={{ is_array($item->id ?? null) ? json_encode($item->id) : $item->id ?? '' }}&{{ $queryParams }}"
                    class="btn btn-sm btn-outline-dark">Prev</a>

                    <a href="{{ url('/neblogisticreport/viewnextreportbyid') }}?id={{ is_array($item->id ?? null) ? json_encode($item->id) : $item->id ?? '' }}&{{ $queryParams }}"
                    class="btn btn-sm btn-outline-dark">Next</a>

                    <a href="/neblogisticreports" class="btn btn-sm btn-dark">Back</a>
                </form>
            </div>

            </div>


        </div>

        @if (session()->has('message'))
            <div class="alert alert-success">
                {{ session()->get('message') }}
            </div>
        @endif
        @if (session()->has('error'))
            <div class="alert alert-danger">
                {{ session()->get('error') }}
            </div>
        @endif


        <div class="row g-4">
            <!-- Employee Details + Request Letter Row -->
            <div class="col-md-6">
                <div class="card shadow-sm border-0 rounded-4 p-4 h-100">
                    <h4 class="fw-semibold mb-3 text-primary">Employee Details</h4>
                    <p class="text-muted mb-2">Emp ID of TM:
                        <strong>{{ is_array($item->emp_id ?? null) ? json_encode($item->emp_id) : $item->emp_id ?? '' }}</strong>
                    </p>
                    <p class="text-muted mb-2">Name of TM:
                        <strong>{{ is_array($item->emp_name ?? null) ? json_encode($item->emp_name) : $item->emp_name ?? '' }}</strong>
                    </p>
                    <p class="text-muted mb-2">TM Mobile Number:
                        <strong>{{ is_array($item->emp_phone ?? null) ? json_encode($item->emp_phone) : $item->emp_phone ?? '' }}</strong>
                    </p>
                    <p class="text-muted mb-2">TM Email ID:
                        <strong>{{ is_array($item->emp_email ?? null) ? json_encode($item->emp_email) : $item->emp_email ?? '' }}</strong>
                    </p>
                    <p class="text-muted mb-2">ABM Name:
                        <strong>{{ is_array($item->abm_name ?? null) ? json_encode($item->abm_name) : $item->abm_name ?? '' }}</strong>
                    </p>
                    <p class="text-muted mb-2">RBM Name:
                        <strong>{{ is_array($item->rbm_name ?? null) ? json_encode($item->rbm_name) : $item->rbm_name ?? '' }}</strong>
                    </p>
                    {{-- <p class="text-muted mb-0">Request Letter:
                        <strong><a href="{{ $item->request_letter }}" target="_blank" download
                                class="text-decoration-underline text-info">Download</a></strong>
                    </p> --}}

                    <h4 class="fw-semibold mb-3 text-primary">Doctor Details</h4>
                    <p class="text-muted mb-2">Dr Name:
                        <strong>{{ is_array($item->doctor_name ?? null) ? json_encode($item->doctor_name) : $item->doctor_name ?? '' }}</strong>
                    </p>
                    <p class="text-muted mb-2">Doctor Mobile Number:
                        <strong>{{ is_array($item->doctor_phone ?? null) ? json_encode($item->doctor_phone) : $item->doctor_phone ?? '' }}</strong>
                    </p>
                    <p class="text-muted mb-2">Speciality:
                        <strong>{{ is_array($item->doctor_speciality ?? null) ? json_encode($item->doctor_speciality) : $item->doctor_speciality ?? '' }}</strong>
                    </p>
                    <p class="text-muted mb-2">MSL CODE of Dr:
                        <strong>{{ is_array($item->msl_code ?? null) ? json_encode($item->msl_code) : $item->msl_code ?? '' }}</strong>
                    </p>
                    <p class="text-muted mb-2">Type of Nebulizer:
                        <strong>{{ is_array($item->type_of_nebulizer ?? null) ? json_encode($item->type_of_nebulizer) : $item->type_of_nebulizer ?? '' }}</strong>
                    </p>
                    <p class="text-muted mb-2">Do you need more than 5 nebulizers
                        <strong>{{ isset($item->more_than_5_nebulizer) ? (is_array($item->more_than_5_nebulizer) ? json_encode($item->more_than_5_nebulizer) : $item->more_than_5_nebulizer) : '' }}</strong>
                    </p>
                    <p class="text-muted mb-2">No of Nebulizer:
                        <strong>{{ is_array($item->no_of_nebulizer ?? null) ? json_encode($item->no_of_nebulizer) : $item->no_of_nebulizer ?? '' }}</strong>
                    </p>
                    <p class="text-muted mb-2">Value of the Parcel:
                        <strong>{{ is_array($item->value_of_parcel ?? null) ? json_encode($item->value_of_parcel) : $item->value_of_parcel ?? '' }}</strong>
                    </p>
                    <p class="text-muted mb-0">Team:
                        <strong>{{ is_array($item->team ?? null) ? json_encode($item->team) : $item->team ?? '' }}</strong>
                    </p>

                </div>

            </div>

            <div class="col-md-6">
                @php
                    $letterPath = $item->request_letter ?? '';
                    if (strpos($letterPath, 'https') === 0) {
                        $fullUrl = $letterPath;
                    } else {
                        $fullUrl = 'https://did94hhhcgq1d.cloudfront.net' . $letterPath;
                    }
                @endphp

                @if (!empty($letterPath))
                    <div class="card shadow-sm border-0 rounded-4 p-4 h-100">
                        <h4 class="fw-semibold mb-3 text-primary">Request Letter</h4>
                        <div class="mb-3">
                            <img src="{{ $fullUrl }}" alt="Request Letter" class="img-fluid rounded border"
                                style="max-height: 300px; object-fit: contain; cursor: pointer;" data-bs-toggle="modal"
                                data-bs-target="#requestLetterModal">
                        </div>
                        <a class="text-decoration-none text-primary fw-medium" href="{{ $fullUrl }}" download>
                            <i class="bi bi-download me-1"></i>Download existing
                        </a>
                    </div>

                    <!-- Modal -->
                    <div class="modal fade" id="requestLetterModal" tabindex="-1"
                        aria-labelledby="requestLetterModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered modal-xl">
                            <div class="modal-content rounded-4 p-3">
                                <div class="modal-header border-0">
                                    <h5 class="modal-title" id="requestLetterModalLabel">Request Letter Preview</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                </div>
                                <div class="modal-body text-center">
                                    <img src="{{ $fullUrl }}" alt="Request Letter Full View"
                                        class="img-fluid rounded shadow-sm"
                                        style="max-height: 80vh; object-fit: contain;">
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            </div>



            <!-- Drop Details -->
            <div class="col-md-6">
                <div class="card shadow-sm border-0 rounded-4 p-4 h-100">
                    <h4 class="fw-semibold mb-3 text-primary">Drop Details</h4>
                    <p class="text-muted mb-2">Clinic / Hospital / Home Name:
                        <strong>{{ is_array($item->clinic_hospital_name ?? null) ? json_encode($item->clinic_hospital_name) : $item->clinic_hospital_name ?? '' }}</strong>
                    </p>
                    <p class="text-muted mb-2">Building Name:
                        <strong>{{ is_array($item->address_building ?? null) ? json_encode($item->address_building) : $item->address_building ?? '' }}</strong>
                    </p>
                    <p class="text-muted mb-2">Address Type:
                        <strong>{{ is_array($item->address_type ?? null) ? json_encode($item->address_type) : $item->address_type ?? '' }}</strong>
                    </p>
                    <p class="text-muted mb-2">Address line 1:
                        <strong>{{ is_array($item->address_line_1 ?? null) ? json_encode($item->address_line_1) : $item->address_line_1 ?? '' }}</strong>
                    </p>
                    <p class="text-muted mb-2">Address line 2:
                        <strong>{{ is_array($item->address_line_2 ?? null) ? json_encode($item->address_line_2) : $item->address_line_2 ?? '' }}</strong>
                    </p>
                    <p class="text-muted mb-2">State:
                        <strong>{{ is_array($item->address_state ?? null) ? json_encode($item->address_state) : $item->address_state ?? '' }}</strong>
                    </p>
                    <p class="text-muted mb-2">City:
                        <strong>{{ is_array($item->address_city ?? null) ? json_encode($item->address_city) : $item->address_city ?? '' }}</strong>
                    </p>
                    <p class="text-muted mb-2">Pin Code:
                        <strong>{{ is_array($item->address_pin_code ?? null) ? json_encode($item->address_pin_code) : $item->address_pin_code ?? '' }}</strong>
                    </p>
                    <p class="text-muted mb-2">Remarks:
                        <strong>{{ is_array($item->remarks ?? null) ? json_encode($item->remarks) : $item->remarks ?? '' }}</strong>
                    </p>
                    <p class="text-muted mb-0">Paramedic/Alternate Contact number:
                        <strong>{{ is_array($item->paramedic_alternate_contact_number ?? null) ? json_encode($item->paramedic_alternate_contact_number) : $item->paramedic_alternate_contact_number ?? '' }}</strong>
                    </p>

                </div>
            </div>

            <!-- Geolocation Details -->
            @if (isset($item->geolocation_address))
                <div class="col-md-6">
                    <div class="card shadow-sm border-0 rounded-4 p-4 h-100">
                        <h4 class="fw-semibold mb-3 text-primary">Geolocation Details</h4>
                        <p class="text-muted mb-2">Address:
                            <strong>{{ is_array($item->geolocation_address ?? null) ? json_encode($item->geolocation_address) : $item->geolocation_address ?? '' }}</strong>
                        </p>
                        @if (!empty($item->geolocation_json))
                            <hr />
                            @php
                                $geolocations = is_string($item->geolocation_json)
                                    ? json_decode($item->geolocation_json)
                                    : $item->geolocation_json;
                            @endphp
                            @foreach ($geolocations as $geok => $geov)
                                @if (is_string($geok) && is_string($geov))
                                    <p class="text-muted mb-1">{{ $geok }}: <strong>{{ $geov }}</strong>
                                    </p>
                                @endif
                            @endforeach
                        @endif
                    </div>
                </div>
            @endif
        </div>


        <!-- Rejected Modal -->
        <div id="rejected-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        <h4>Rejection Reason</h4>
                        <form method="post" action="/neblogisticreport/editreport" id="form-rejected" class="px-3">
                            @csrf
                            <input type="hidden" name="user_id" id="field-user_id"
                                value="{{ is_array($item->emp_id ?? null) ? json_encode($item->emp_id) : $item->emp_id ?? '' }}">
                            <input type="hidden" name="record_id" id="field-record_id"
                                value="{{ is_array($item->id ?? null) ? json_encode($item->id) : $item->id ?? '' }}">
                            <input type="hidden" name="emp_id" id="field-emp_id"
                                value="{{ is_array($item->emp_id ?? null) ? json_encode($item->emp_id) : $item->emp_id ?? '' }}">
                            <input type="hidden" name="submission_id" id="field-submission_id"
                                value="{{ is_array($item->submission_id ?? null) ? json_encode($item->submission_id) : $item->submission_id ?? '' }}">
                            <input type="hidden" name="id"
                                value="{{ is_array($item->id ?? null) ? json_encode($item->id) : $item->id ?? '' }}">
                            <input type="hidden" name="status" value="Rejected">

                            <div class="mb-3">
                                <label for="rejected_reason" class="form-label">Please enter the reason to reject</label>
                                <textarea class="form-control" name="rejected_reason" id="rejected_reason" required=""></textarea>
                            </div>

                            <div class="mb-2 text-center">
                                <button class="btn rounded-pill btn-primary" type="submit">Submit</button>
                            </div>
                        </form>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

        <div id="approve-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        <h4>Approval Reason</h4>
                        <form method="post" action="/neblogisticreport/editreport" id="form-availiblity"
                            class="px-3">
                            @csrf
                            <input type="hidden" name="user_id" id="field-user_id" value="{{ $item->emp_id }}">
                            <input type="hidden" name="record_id" id="field-record_id" value="{{ $item->id }}">
                            <input type="hidden" name="emp_id" id="field-emp_id" value="{{ $item->emp_id }}">
                            <input type="hidden" name="submission_id" id="field-submission_id"
                                value="{{ $item->submission_id }}">
                            <input type="hidden" name="id" value="{{ $item->id }}">
                            <input type="hidden" name="status" value="Approved">
                            <input type="hidden" name="employee_email" id="hiddenfield-employee_email"
                                value="{{ $item->emp_email }}">
                            <input type="hidden" name="abm_email" id="hiddenfield-employee_email"
                                value="{{ $item->abm_email }}">

                            <div class="mb-3">
                                <label for="approve_reason" class="form-label">Please enter the reason to approve</label>
                                <textarea class="form-control" name="approve_reason" id="approve_reason" required=""></textarea>
                            </div>

                            <div class="mb-2 text-center">
                                <button class="btn rounded-pill btn-primary" type="submit">Submit</button>
                            </div>
                        </form>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div>


        <!-- Dispatched Modal -->
        <div id="dispatched-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        <h4>Dispatched Details</h4>
                        <form method="post" action="/neblogisticreport/editreport" id="form-dispatched" class="px-3">
                            @csrf
                            <input type="hidden" name="user_id"
                                value="{{ is_array($item->emp_id ?? null) ? json_encode($item->emp_id) : $item->emp_id ?? '' }}">
                            <input type="hidden" name="record_id"
                                value="{{ is_array($item->id ?? null) ? json_encode($item->id) : $item->id ?? '' }}">
                            <input type="hidden" name="emp_id"
                                value="{{ is_array($item->emp_id ?? null) ? json_encode($item->emp_id) : $item->emp_id ?? '' }}">
                            <input type="hidden" name="submission_id"
                                value="{{ is_array($item->submission_id ?? null) ? json_encode($item->submission_id) : $item->submission_id ?? '' }}">
                            <input type="hidden" name="id"
                                value="{{ is_array($item->id ?? null) ? json_encode($item->id) : $item->id ?? '' }}">
                            <input type="hidden" name="status" value="Dispatched">

                            <div class="mb-3">
                                <label for="order_no" class="form-label">Order Number <span
                                        class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="order_no" id="order_no" required>
                            </div>
                            <div class="mb-3">
                                <label for="invoice_no" class="form-label">Invoice Number <span
                                        class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="invoice_no" id="invoice_no" required>
                            </div>
                            <div class="mb-3">
                                <label for="courier_name" class="form-label">Courier Name <span
                                        class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="courier_name" id="courier_name"
                                    required>
                            </div>
                            <div class="mb-3">
                                <label for="lr_no" class="form-label">LR Number <span
                                        class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="lr_no" id="lr_no" required>
                            </div>
                            <div class="mb-3">
                                <label for="lr_date" class="form-label">LR Date <span
                                        class="text-danger">*</span></label>
                                <input type="date" class="form-control" name="lr_date" id="lr_date" required>
                            </div>
                            <div class="mb-2 text-center">
                                <button class="btn rounded-pill btn-primary" type="submit">Submit</button>
                            </div>
                        </form>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

        {{-- Doc Details in modal --}}
        <div class="modal fade" id="viewReportModal" tabindex="-1">
            <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
                <div class="modal-content" style="border-radius: 16px; border: 0; overflow: hidden;">

                    <div class="modal-header" style="background: #f8f9fa; border-bottom: 1px solid #e9ecef;">
                        <h7 class="modal-title" style="font-weight: 700; font-size: 14px; color: #0b5ed7;" id="viewReportModalHeading">
                            Doctor Details
                        </h7>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <div class="modal-body" id="viewReportModalBody" style="padding: 18px; background: #ffffff;">
                        <!-- Content will be injected here via AJAX -->
                    </div>

                </div>
            </div>
        </div>

        @if (isset($doctors) && $doctors->count())
            <div class="row mt-4">
                <div class="col-12">
                    <div class="card shadow-sm border-0 rounded-4">
                        <div class="card-header bg-light">
                            <h5 class="mb-0 text-primary">
                                MSL Code ({{ $item->msl_code }})
                            </h5>
                        </div>

                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-bordered table-hover align-middle mb-0">
                                    <thead class="table-light">
                                        <tr>
                                            <th>ID</th>
                                            <th>Doctor Name</th>
                                            <th>TM Name</th>
                                            <th>Status</th>
                                            <th>Team</th>
                                            <th>Created At</th>
                                            <th style="width: 120px;">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($doctors as $doc)
                                            <tr>
                                                <td>{{ $doc->id }}</td>
                                                <td>{{ $doc->doctor_name ?? '-' }}</td>
                                                <td>{{ $doc->emp_name ?? '-' }}</td>
                                                <td>
                                                    <span
                                                        class="badge 
                                                        @if ($doc->status == 'Approved') bg-success
                                                        @elseif($doc->status == 'Rejected') bg-danger
                                                        @elseif($doc->status == 'L1 Approved') bg-info
                                                        @else bg-secondary @endif">
                                                        {{ $doc->status }}
                                                    </span>
                                                </td>
                                                <td>{{ $doc->team ?? '-' }}</td>
                                                <td>{{ \Carbon\Carbon::parse($doc->created_at)->format('d M Y') }}</td>
                                                <td>
                                                    <div class="d-flex gap-1">
                                                        <button
                                                            class="btn btn-sm btn-outline-primary p-1 view-report-btn"
                                                            data-id="{{ $doc->id }}">
                                                            <i class="mdi mdi-eye"></i> View
                                                        </button>

                                                    </div>
                                                </td>

                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif

    </div>
@endsection

@section('script')
    <script src="{{ asset('assets/libs/datatables/datatables.min.js') }}"></script>
    <script src="{{ asset('assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>
    <script src="{{ asset('assets/libs/flatpickr/flatpickr.min.js') }}"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script>
        $(document).ready(function() {
            $('#status-select').on('change', function() {
                var val = $(this).val();
                if (val === 'Rejected') {
                    var modal = new bootstrap.Modal(document.getElementById('rejected-modal'));
                    modal.show();
                } else if (val === 'Dispatched') {
                    var modal = new bootstrap.Modal(document.getElementById('dispatched-modal'));
                    modal.show();
                } else if ($(this).val() === 'Approved' && $('#field-check_approve_after_reject').val() ===
                    'Rejected') {
                    var modal = new bootstrap.Modal(document.getElementById('approve-modal'));
                    modal.show();
                }
            });
        });
    </script>

    <script>
    $(document).on('click', '.view-report-btn', function () {
        let id = $(this).data('id');

        $('#viewReportModal').modal('show');

        $('#viewReportModalBody').html(`
            <div class="text-center py-5">
                <div class="spinner-border"></div>
            </div>
        `);

        $.ajax({
            url: "{{ url('/neblogisticreport/viewdoctordetails') }}",
            type: "GET",
            data: { id: id },
            success: function (res) {

                if (!res.success) {
                    $('#viewReportModalBody').html('<p class="text-danger">Record not found</p>');
                    return;
                }

                const item = res.data;

                // Build the HTML using JS (same as your Blade)
                const html = `
                    <div class="row g-4">

                        <!-- Employee Details + Doctor Details -->
                        <div class="col-md-6">
                            <div class="card shadow-sm border-0 rounded-4 p-4 h-100">
                                <h4 class="fw-semibold mb-3 text-primary">Employee Details</h4>

                                <p class="text-muted mb-2">Emp ID of TM:
                                    <strong>${Array.isArray(item.emp_id) ? JSON.stringify(item.emp_id) : (item.emp_id ?? '')}</strong>
                                </p>
                                <p class="text-muted mb-2">Name of TM:
                                    <strong>${Array.isArray(item.emp_name) ? JSON.stringify(item.emp_name) : (item.emp_name ?? '')}</strong>
                                </p>
                                <p class="text-muted mb-2">TM Mobile Number:
                                    <strong>${Array.isArray(item.emp_phone) ? JSON.stringify(item.emp_phone) : (item.emp_phone ?? '')}</strong>
                                </p>
                                <p class="text-muted mb-2">TM Email ID:
                                    <strong>${Array.isArray(item.emp_email) ? JSON.stringify(item.emp_email) : (item.emp_email ?? '')}</strong>
                                </p>
                                <p class="text-muted mb-2">ABM Name:
                                    <strong>${Array.isArray(item.abm_name) ? JSON.stringify(item.abm_name) : (item.abm_name ?? '')}</strong>
                                </p>
                                <p class="text-muted mb-2">RBM Name:
                                    <strong>${Array.isArray(item.rbm_name) ? JSON.stringify(item.rbm_name) : (item.rbm_name ?? '')}</strong>
                                </p>

                                <h4 class="fw-semibold mb-3 text-primary mt-4">Doctor Details</h4>

                                <p class="text-muted mb-2">Dr Name:
                                    <strong>${Array.isArray(item.doctor_name) ? JSON.stringify(item.doctor_name) : (item.doctor_name ?? '')}</strong>
                                </p>
                                <p class="text-muted mb-2">Doctor Mobile Number:
                                    <strong>${Array.isArray(item.doctor_phone) ? JSON.stringify(item.doctor_phone) : (item.doctor_phone ?? '')}</strong>
                                </p>
                                <p class="text-muted mb-2">Speciality:
                                    <strong>${Array.isArray(item.doctor_speciality) ? JSON.stringify(item.doctor_speciality) : (item.doctor_speciality ?? '')}</strong>
                                </p>
                                <p class="text-muted mb-2">MSL CODE of Dr:
                                    <strong>${Array.isArray(item.msl_code) ? JSON.stringify(item.msl_code) : (item.msl_code ?? '')}</strong>
                                </p>
                                <p class="text-muted mb-2">Type of Nebulizer:
                                    <strong>${Array.isArray(item.type_of_nebulizer) ? JSON.stringify(item.type_of_nebulizer) : (item.type_of_nebulizer ?? '')}</strong>
                                </p>
                                <p class="text-muted mb-2">Do you need more than 5 nebulizers:
                                    <strong>${item.more_than_5_nebulizer ? (Array.isArray(item.more_than_5_nebulizer) ? JSON.stringify(item.more_than_5_nebulizer) : item.more_than_5_nebulizer) : ''}</strong>
                                </p>
                                <p class="text-muted mb-2">No of Nebulizer:
                                    <strong>${Array.isArray(item.no_of_nebulizer) ? JSON.stringify(item.no_of_nebulizer) : (item.no_of_nebulizer ?? '')}</strong>
                                </p>
                                <p class="text-muted mb-2">Value of the Parcel:
                                    <strong>${Array.isArray(item.value_of_parcel) ? JSON.stringify(item.value_of_parcel) : (item.value_of_parcel ?? '')}</strong>
                                </p>
                                <p class="text-muted mb-0">Team:
                                    <strong>${Array.isArray(item.team) ? JSON.stringify(item.team) : (item.team ?? '')}</strong>
                                </p>
                            </div>
                        </div>

                        <!-- Request Letter -->
                        <div class="col-md-6">
                            ${item.request_letter ? `
                                <div class="card shadow-sm border-0 rounded-4 p-4 h-100">
                                    <h4 class="fw-semibold mb-3 text-primary">Request Letter</h4>
                                    <div class="mb-3">
                                        <img src="${item.request_letter.startsWith('https') ? item.request_letter : 'https://did94hhhcgq1d.cloudfront.net' + item.request_letter}"
                                            class="img-fluid rounded border"
                                            style="max-height: 300px; object-fit: contain; cursor: pointer;"
                                            data-bs-toggle="modal"
                                            data-bs-target="#requestLetterModal">
                                    </div>
                                    <a class="text-decoration-none text-primary fw-medium"
                                    href="${item.request_letter.startsWith('https') ? item.request_letter : 'https://did94hhhcgq1d.cloudfront.net' + item.request_letter}"
                                    download>
                                        <i class="bi bi-download me-1"></i>Download existing
                                    </a>
                                </div>
                            ` : ''}

                            <!-- request letter modal -->
                            ${item.request_letter ? `
                            <div class="modal fade" id="requestLetterModal" tabindex="-1">
                                <div class="modal-dialog modal-dialog-centered modal-xl">
                                    <div class="modal-content rounded-4 p-3">
                                        <div class="modal-header border-0">
                                            <h5 class="modal-title">Request Letter Preview</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                        </div>
                                        <div class="modal-body text-center">
                                            <img src="${item.request_letter.startsWith('https') ? item.request_letter : 'https://did94hhhcgq1d.cloudfront.net' + item.request_letter}"
                                                class="img-fluid rounded shadow-sm"
                                                style="max-height: 80vh; object-fit: contain;">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            ` : ''}
                        </div>

                        <!-- Drop Details -->
                        <div class="col-md-6">
                            <div class="card shadow-sm border-0 rounded-4 p-4 h-100">
                                <h4 class="fw-semibold mb-3 text-primary">Drop Details</h4>

                                <p class="text-muted mb-2">Clinic / Hospital / Home Name:
                                    <strong>${Array.isArray(item.clinic_hospital_name) ? JSON.stringify(item.clinic_hospital_name) : (item.clinic_hospital_name ?? '')}</strong>
                                </p>
                                <p class="text-muted mb-2">Building Name:
                                    <strong>${Array.isArray(item.address_building) ? JSON.stringify(item.address_building) : (item.address_building ?? '')}</strong>
                                </p>
                                <p class="text-muted mb-2">Address Type:
                                    <strong>${Array.isArray(item.address_type) ? JSON.stringify(item.address_type) : (item.address_type ?? '')}</strong>
                                </p>
                                <p class="text-muted mb-2">Address line 1:
                                    <strong>${Array.isArray(item.address_line_1) ? JSON.stringify(item.address_line_1) : (item.address_line_1 ?? '')}</strong>
                                </p>
                                <p class="text-muted mb-2">Address line 2:
                                    <strong>${Array.isArray(item.address_line_2) ? JSON.stringify(item.address_line_2) : (item.address_line_2 ?? '')}</strong>
                                </p>
                                <p class="text-muted mb-2">State:
                                    <strong>${Array.isArray(item.address_state) ? JSON.stringify(item.address_state) : (item.address_state ?? '')}</strong>
                                </p>
                                <p class="text-muted mb-2">City:
                                    <strong>${Array.isArray(item.address_city) ? JSON.stringify(item.address_city) : (item.address_city ?? '')}</strong>
                                </p>
                                <p class="text-muted mb-2">Pin Code:
                                    <strong>${Array.isArray(item.address_pin_code) ? JSON.stringify(item.address_pin_code) : (item.address_pin_code ?? '')}</strong>
                                </p>
                                <p class="text-muted mb-2">Remarks:
                                    <strong>${Array.isArray(item.remarks) ? JSON.stringify(item.remarks) : (item.remarks ?? '')}</strong>
                                </p>
                                <p class="text-muted mb-0">Paramedic/Alternate Contact number:
                                    <strong>${Array.isArray(item.paramedic_alternate_contact_number) ? JSON.stringify(item.paramedic_alternate_contact_number) : (item.paramedic_alternate_contact_number ?? '')}</strong>
                                </p>
                            </div>
                        </div>

                        <!-- Geolocation -->
                        ${item.geolocation_address ? `
                            <div class="col-md-6">
                                <div class="card shadow-sm border-0 rounded-4 p-4 h-100">
                                    <h4 class="fw-semibold mb-3 text-primary">Geolocation Details</h4>

                                    <p class="text-muted mb-2">Address:
                                        <strong>${Array.isArray(item.geolocation_address) ? JSON.stringify(item.geolocation_address) : (item.geolocation_address ?? '')}</strong>
                                    </p>

                                    ${item.geolocation_json ? `
                                        <hr/>
                                        ${(() => {
                                            let geo = item.geolocation_json;
                                            if (typeof geo === 'string') geo = JSON.parse(geo);

                                            let html = '';
                                            for (const [key, val] of Object.entries(geo)) {
                                                if (typeof key === 'string' && typeof val === 'string') {
                                                    html += `<p class="text-muted mb-1">${key}: <strong>${val}</strong></p>`;
                                                }
                                            }
                                            return html;
                                        })()}
                                    ` : ''}
                                </div>
                            </div>
                        ` : ''}

                    </div>
                `;

                $('#viewReportModalBody').html(html);
                $('#viewReportModalHeading').text('Doctor Details (MSL Code: '+item.msl_code+')')

            },
            error: function () {
                $('#viewReportModalBody').html('<p class="text-danger">Failed to load data</p>');
            }
        });
    });
    </script>

@endsection