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

@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
                // echo '<pre>';
                // print_r($item);
                // exit;
            @endphp

            @php
                $queryParams = http_build_query([
                    'state' => request('state'),
                    'status' => request('status'),
                    'from_date' => request('from_date'),
                    'to_date' => request('to_date'),
                    'requesttype' => 'edit',
                ]);
            @endphp
            <div class="row align-items-center g-2 mb-2">
            <div class="col-md-4">
                <div class="d-flex align-items-center gap-2 flex-wrap">
                    RequestID:
                    <span class="fw-semibold">{{ $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-8">
                <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" value="{{ $item->emp_id }}">
                    <input type="hidden" name="record_id" value="{{ $item->id }}">
                    <input type="hidden" name="emp_id" value="{{ $item->emp_id }}">
                    <input type="hidden" name="submission_id" value="{{ $item->submission_id }}">
                    <input type="hidden" name="employee_email" value="{{ $item->emp_email }}">
                    <input type="hidden" name="check_approve_after_reject" value="{{ $item->status }}">

                    <select class="form-select form-select-sm" name="status" id="status-select" style="width: 180px;">
                        <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>
                    </select>

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

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

                    <a href="{{ url('/neblogisticreport/viewnextreportbyid') }}?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

        <form method="POST" action="/neblogisticreport/editreport" enctype="multipart/form-data">
            {{-- <input type="hidden" name="id" id="field-id" value="{{ $item->id }}"> --}}
            <input type="hidden" name="record_id" id="field-record_id" value="{{ $item->id }}">
            <input type="hidden" name="user_id" id="field-user_id" value="{{ $item->user_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="hierarchy_id" id="field-hierarchy_id" value="{{ $item->hierarchy_id }}"> --}}
            @csrf
            <div class="row g-4">
                <!-- Employee Details -->
                <div class="col-md-6">
                    <div class="card shadow-sm border-0 rounded-4 p-4">
                        <h4 class="mb-3 text-primary">Employee Details</h4>

                        <div class="form-group mb-3">
                            <label class="form-label">Emp ID of TM</label>
                            <input type="text" name="emp_id" class="form-control"
                                value="{{ old('emp_id', $item->emp_id ?? '') }}">
                        </div>

                        <div class="form-group mb-3">
                            <label class="form-label">Name of TM</label>
                            <input type="text" name="employee_name" class="form-control"
                                value="{{ old('employee_name', $item->emp_name ?? '') }}">
                        </div>

                        <div class="form-group mb-3">
                            <label class="form-label">TM Mobile Number</label>
                            <input type="text" name="employee_phone" class="form-control"
                                value="{{ old('employee_phone', $item->emp_phone ?? '') }}">
                        </div>

                        <div class="form-group mb-3">
                            <label class="form-label">TM Email ID</label>
                            <input type="email" name="employee_email" class="form-control"
                                value="{{ old('employee_email', $item->emp_email ?? '') }}">
                        </div>

                        <div class="form-group mb-3">
                            <label class="form-label">ABM Name</label>
                            <input type="text" name="abm_name" class="form-control"
                                value="{{ old('abm_name', $item->abm_name ?? '') }}">
                        </div>

                        <div class="form-group mb-3">
                            <label class="form-label">ABM Email</label>
                            <input type="text" name="abm_email" class="form-control"
                                value="{{ old('abm_email', $item->abm_email ?? '') }}">
                        </div>

                        <div class="form-group mb-3">
                            <label class="form-label">RBM Name</label>
                            <input type="text" name="rbm_name" class="form-control"
                                value="{{ old('rbm_name', $item->rbm_name ?? '') }}">
                        </div>

                        <div class="form-group mb-2">
                            <label class="form-label">Request Letter</label>
                            <input type="file" name="upload_request_letter" class="form-control">
                        </div>

                        <h4 class="mb-3 text-primary">Doctor Details</h4>

                        <div class="form-group mb-3">
                            <label class="form-label">Dr Name</label>
                            <input type="text" name="dr_name" class="form-control"
                                value="{{ old('dr_name', $item->doctor_name ?? '') }}">
                        </div>

                        <div class="form-group mb-3">
                            <label class="form-label">Doctor Mobile Number</label>
                            <input type="text" name="doctor_mobile_number" class="form-control"
                                value="{{ old('doctor_mobile_number', $item->doctor_phone ?? '') }}">
                        </div>

                        <div class="form-group mb-3">
                            <label class="form-label">Speciality</label>
                            <select class="form-select" id="field-speciality" name="speciality" required>
                                <option value=""> -- Select -- </option>
                                @php
                                    $specialities = [
                                        'chest' => 'Chest',
                                        'paedia' => 'Paedia',
                                        'consulting_physician' => 'Consulting Physician',
                                        'gp_mbbs' => 'GP - MBBS',
                                        'gp_non_mbbs' => 'gp_non_mbbs',
                                        'intensivist' => 'Intensivist',
                                        'others' => 'Others',
                                    ];
                                    $selected = old('doctor_speciality', $item->doctor_speciality ?? '');
                                @endphp

                                @foreach ($specialities as $value => $label)
                                    <option value="{{ $value }}" {{ $selected == $value ? 'selected' : '' }}>
                                        {{ $label }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group mb-3">
                            <label class="form-label">MSL CODE of Dr</label>
                            <input type="text" name="msl_code" class="form-control"
                                value="{{ old('msl_code', $item->msl_code ?? '') }}">
                        </div>

                        <div class="form-group mb-3">
                            <label class="form-label">Type of Nebulizer</label>
                            <select name="type_of_nebulizer" class="form-select">
                                <option value="Robust"
                                    {{ old('type_of_nebulizer', $item->type_of_nebulizer ?? '') == 'Robust' ? 'selected' : '' }}>
                                    Robust
                                </option>
                                <option value="Mini"
                                    {{ old('type_of_nebulizer', $item->type_of_nebulizer ?? '') == 'Mini' ? 'selected' : '' }}>
                                    Mini
                                </option>
                                <option value="Others"
                                    {{ old('type_of_nebulizer', $item->type_of_nebulizer ?? '') == 'Others' ? 'selected' : '' }}>
                                    Others
                                </option>
                            </select>
                        </div>

                        @php
                            $selectedValue = old('more_than_5_nebulizer', $item->more_than_5_nebulizer ?? 'No');
                        @endphp

                        <div class="form-group mb-3">
                            <label class="form-label">Do you need more than 5 nebulizers?</label>
                            <select name="more_than_5_nebulizer" class="form-select">
                                <option value="Yes" {{ $selectedValue === 'Yes' ? 'selected' : '' }}>Yes</option>
                                <option value="No" {{ $selectedValue === 'No' ? 'selected' : '' }}>No</option>
                            </select>
                        </div>


                        @php
                            $maxNebulizer = 5;
                            if (!empty($item->no_of_nebulizer) && $item->no_of_nebulizer > 5) {
                                $maxNebulizer = 10;
                            }
                        @endphp


                        <div class="form-group mb-3">
                            <label class="form-label">No of Nebulizer</label>
                            <select name="no_of_nebulizer" class="form-select">
                                @for ($i = 1; $i <= $maxNebulizer; $i++)
                                    <option value="{{ $i }}"
                                        {{ old('no_of_nebulizer', $item->no_of_nebulizer ?? '') == $i ? 'selected' : '' }}>
                                        {{ $i }}
                                    </option>
                                @endfor
                            </select>
                        </div>

                        <div class="form-group mb-3">
                            <label class="form-label">Value of the Parcel</label>
                            <input type="text" name="value_of_the_parcel" class="form-control"
                                value="{{ old('value_of_the_parcel', $item->value_of_parcel ?? '') }}">
                        </div>

                        <div class="form-group mb-2">
                            <label class="form-label">Team</label>
                            <select class="form-select" id="field-team" name="team" required>
                                <option value=""> -- Select -- </option>
                                @php
                                    $teams = [
                                        'Neb 1' => 'Neb 1',
                                        'Neb 2' => 'Neb 2',
                                        'Neb Arise' => 'Neb Arise',
                                    ];
                                    $selectedTeam = old('team', $item->team ?? '');
                                @endphp

                                @foreach ($teams as $value => $label)
                                    <option value="{{ $value }}" {{ $selectedTeam == $value ? 'selected' : '' }}>
                                        {{ $label }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="card shadow-sm border-0 rounded-4 p-4 h-100">
                        <h5 class="mb-3 text-primary">Request Letter</h5>

                        @php
                            $letterPath = $item->request_letter ?? '';
                            $prefix = 'https://did94hhhcgq1d.cloudfront.net';
                            $fullUrl = strpos($letterPath, $prefix) === 0 ? $letterPath : $prefix . $letterPath;
                        @endphp

                        @if (!empty($letterPath))
                            <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="#imageModal">

                            </div>
                            <a class="text-decoration-none text-primary fw-medium" href="{{ $fullUrl }}" download>
                                <i class="bi bi-download me-1"></i>Download existing
                            </a>
                        @else
                            <p class="text-muted fst-italic">No request letter available.</p>
                        @endif
                    </div>
                </div>

                <div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel"
                    aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered modal-xl">
                        <div class="modal-content border-0 shadow-lg">
                            <div class="modal-header border-0">
                                <h5 class="modal-title text-primary" id="imageModalLabel">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 p-3">
                                <img src="{{ $fullUrl }}" class="img-fluid rounded" alt="Request Letter"
                                    style="max-height: 85vh; width: auto;">
                            </div>
                        </div>
                    </div>
                </div>

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

                        <div class="form-group mb-3">
                            <label class="form-label">Clinic / Hospital / Home Name</label>
                            <input type="text" name="clinic_hospital_home_name" class="form-control"
                                value="{{ old('clinic_hospital_home_name', $item->clinic_hospital_name ?? '') }}">
                        </div>

                        <div class="form-group mb-3">
                            <label class="form-label">Building Name</label>
                            <input type="text" name="building_name" class="form-control"
                                value="{{ old('building_name', $item->address_building ?? '') }}">
                        </div>

                        <div class="form-group mb-3">
                            <label class="form-label">Address Type</label>
                            <input type="text" name="address_type" class="form-control"
                                value="{{ old('address_type', $item->address_type ?? '') }}">
                        </div>

                        <div class="form-group mb-3">
                            <label class="form-label">Address line 1</label>
                            <input type="text" name="address_line_1" class="form-control"
                                value="{{ old('address_line_1', $item->address_line_1 ?? '') }}">
                        </div>

                        <div class="form-group mb-3">
                            <label class="form-label">Address line 2</label>
                            <input type="text" name="address_line_2" class="form-control"
                                value="{{ old('address_line_2', $item->address_line_2 ?? '') }}">
                        </div>

                        <div class="form-group mb-3">
                            <label class="form-label">State</label>
                            <select name="state" class="form-select" required>
                                <option value=""> -- Select -- </option>
                                @php
                                    $states = [
                                        'Andhra Pradesh',
                                        'Andaman and Nicobar Islands',
                                        'Arunachal Pradesh',
                                        'Assam',
                                        'Bihar',
                                        'Chandigarh',
                                        'Chhattisgarh',
                                        'Dadar and Nagar Haveli',
                                        'Daman and Diu',
                                        'Delhi',
                                        'Lakshadweep',
                                        'Puducherry',
                                        'Goa',
                                        'Gujarat',
                                        'Haryana',
                                        'Himachal Pradesh',
                                        'Jammu and Kashmir',
                                        'Jharkhand',
                                        'Karnataka',
                                        'Kerala',
                                        'Madhya Pradesh',
                                        'Maharashtra',
                                        'Manipur',
                                        'Meghalaya',
                                        'Mizoram',
                                        'Nagaland',
                                        'Odisha',
                                        'Punjab',
                                        'Rajasthan',
                                        'Sikkim',
                                        'Tamil Nadu',
                                        'Telangana',
                                        'Tripura',
                                        'Uttar Pradesh',
                                        'Uttarakhand',
                                        'West Bengal',
                                    ];
                                    $selectedState = old('state', $item->address_state ?? '');
                                @endphp

                                @foreach ($states as $state)
                                    <option value="{{ $state }}"
                                        {{ $selectedState === $state ? 'selected' : '' }}>{{ $state }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group mb-3">
                            <label class="form-label">City</label>
                            <input type="text" name="city" class="form-control"
                                value="{{ old('city', $item->address_city ?? '') }}">
                        </div>

                        <div class="form-group mb-2">
                            <label class="form-label">Pin Code</label>
                            <input type="text" name="pin_code" class="form-control"
                                value="{{ old('pin_code', $item->address_pin_code ?? '') }}">
                        </div>

                        <div class="form-group mb-2">
                            <label class="form-label">Remark</label>
                            <input type="text" name="remarks" class="form-control"
                                value="{{ old('remarks', $item->remarks ?? '') }}">
                        </div>

                        <div class="form-group mb-2">
                            <label class="form-label">Paramedic/Alternate Contact number</label>
                            <input type="text" name="paramedic_alternate_contact_number" class="form-control"
                                value="{{ old('paramedic_alternate_contact_number', $item->paramedic_alternate_contact_number ?? '') }}">
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="card shadow-sm border-0 rounded-4 p-4">
                        <h4 class="mb-3 text-primary">Geolocation</h4>

                        {{-- @if (isset($item->geolocation_address))
                            <p class="text-muted mb-3">
                                <strong class="d-block mb-1 text-dark">Full Address:</strong>
                                {{ $item->geolocation_address }}
                            </p>

                            @if (!empty($item->geolocation_json))
                                @php $geolocations = json_decode($item->geolocation_json); @endphp

                                <table class="table table-sm table-borderless mb-0">
                                    <tbody>
                                        @foreach ($geolocations as $geok => $geov)
                                            <tr>
                                                <td class="text-muted" style="width: 40%; text-transform: capitalize;">
                                                    {{ str_replace('_', ' ', $geok) }}</td>
                                                <td><strong>{{ $geov }}</strong></td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            @endif
                        @endif --}}

                        {{-- <div class="col-md-6"> --}}
                        <div class="card shadow-sm border-0 rounded-4 p-4">
                            <h4 class="mb-3 text-primary">Geolocation</h4>

                            @if (!empty($item->geolocation_address))
                                <p class="text-muted mb-3">
                                    <strong class="d-block mb-1 text-dark">Full Address:</strong>
                                    {{ $item->geolocation_address }}
                                </p>
                            @endif

                            @if (!empty($item->geolocation_json))
                                @php
                                    $geolocations = json_decode($item->geolocation_json);

                                    $toString = function ($v) {
                                        if (is_null($v)) {
                                            return '';
                                        }
                                        if (is_scalar($v)) {
                                            return (string) $v;
                                        }
                                        if (is_object($v)) {
                                            $v = (array) $v;
                                        }

                                        if (is_array($v)) {
                                            $out = [];
                                            array_walk_recursive($v, fn($x) => is_scalar($x) && ($out[] = $x));
                                            return implode(', ', $out);
                                        }
                                        return '';
                                    };
                                @endphp

                                @if (is_array($geolocations) || is_object($geolocations))
                                    <table class="table table-sm table-borderless mb-0">
                                        <tbody>
                                            @foreach ((array) $geolocations as $key => $val)
                                                @php $value = $toString($val); @endphp
                                                @if ($value !== '')
                                                    <tr>
                                                        <td class="text-muted"
                                                            style="width:40%;text-transform:capitalize;">
                                                            {{ ucwords(str_replace('_', ' ', $key)) }}
                                                        </td>
                                                        <td><strong>{{ $value }}</strong></td>
                                                    </tr>
                                                @endif
                                            @endforeach
                                        </tbody>
                                    </table>
                                @endif
                            @endif
                        </div>

                        {{-- </div> --}}

                    </div>
                </div>


            </div>


            <!-- Submit Button -->
            <div class="row mt-3">
                <div class="col-md-12 text-end">
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
            </div>
        </form>

        @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 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-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="Rejected">
                            <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="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>

        {{-- 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>

    </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>
        $(document).ready(function() {
            $('#status-select').on('change', function() {
                if ($(this).val() === 'Rejected') {
                    var modal = new bootstrap.Modal(document.getElementById('rejected-modal'));
                    modal.show();
                }

                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