@extends('backend.template.layouts.template-base')
@section('title', $person->name . ' Details')

@section('content')
<section>

    {{-- Header --}}
    <div class="d-flex align-items-center justify-content-between mb-4">
        <a href="{{ route('backend.template.delivery-team.index') }}"
           class="d-inline-flex align-items-center gap-1 text-dark text-decoration-none">
            <i class="ri-arrow-left-s-line" style="font-size:26px;"></i>
            <h2 class="text-title fw-semibold mb-0">{{ $person->name }} Details</h2>
        </a>
        <div class="d-flex gap-2">
            @if($person->status === 'active')
                <button class="pd-btn-status-inactive" onclick="openStatusModal('inactive')">Mark as Inactive</button>
            @else
                <button class="pd-btn-status-active" onclick="openStatusModal('active')">Mark as Active</button>
            @endif
            <a href="{{ route('backend.template.delivery-team.edit', $person->id) }}" class="pd-btn-edit-person">
                <i class="ri-edit-box-line"></i> Edit Details
            </a>
            <button class="pd-btn-delete-person" onclick="openDeleteModal()">
                <i class="ri-delete-bin-line"></i> Delete Person
            </button>
        </div>
    </div>

    {{-- Summary Card --}}
    <div class="pd-summary-card mb-3">
        <div class="d-flex align-items-center gap-3 flex-grow-1">
            <div class="pd-photo">
                @if($person->person_image)
                    <img src="{{ asset($person->person_image) }}" alt="{{ $person->name }}">
                @else
                    <div class="pd-photo-placeholder"><i class="ri-user-line"></i></div>
                @endif
            </div>
            <div>
                <div class="pd-summary-name">{{ $person->name }}</div>
                <div class="pd-summary-meta">
                    {{ $person->person_code }}
                    &nbsp;|&nbsp; Added by : <strong>{{ $person->createdBy?->name ?? '—' }}</strong>
                    &nbsp;|&nbsp; Last Updated on : {{ $person->updated_at->format('d/m/Y') }}
                    &nbsp;|&nbsp; Last Updated by : <strong>{{ $person->updatedBy?->name ?? '—' }}</strong>
                    &nbsp;|&nbsp; <strong>Total Orders: 000</strong>
                </div>
            </div>
        </div>
        <div class="text-end flex-shrink-0">
            <div class="pd-status-label">Status</div>
            <div class="pd-status-val-{{ $person->status }}">{{ ucfirst($person->status) }}</div>
        </div>
    </div>

    {{-- Person Info Card --}}
    <div class="pd-info-card mb-4">
        <div class="pd-section-title mb-4">Person Info</div>
        <div class="row g-4">
            <div class="col-md-3">
                <div class="pd-field-label">Person Name</div>
                <div class="pd-field-value">{{ $person->name }}</div>
            </div>
            <div class="col-md-3">
                <div class="pd-field-label">Contact Number</div>
                <div class="pd-field-value">{{ $person->contact_number }}</div>
            </div>
            <div class="col-md-3">
                <div class="pd-field-label">Alternate Contact Number</div>
                <div class="pd-field-value">{{ $person->alternate_contact ?? '—' }}</div>
            </div>
            <div class="col-md-3">
                <div class="pd-field-label">Email Address</div>
                <div class="pd-field-value">{{ $person->email }}</div>
            </div>

            <div class="col-md-3">
                <div class="pd-field-label">Zone</div>
                <div class="pd-field-value">{{ $person->zone?->name ?? '—' }}</div>
            </div>
            <div class="col-md-3">
                <div class="pd-field-label">DOB (Date Of Birth)</div>
                <div class="pd-field-value">{{ $person->dob ? $person->dob->format('d/m/Y') : '—' }}</div>
            </div>
            <div class="col-md-3">
                <div class="pd-field-label">Gender</div>
                <div class="pd-field-value">{{ ucfirst($person->gender) }}</div>
            </div>
            <div class="col-md-3">
                <div class="pd-field-label">Address</div>
                <div class="pd-field-value">{{ $person->address }}</div>
            </div>

            {{-- Documents --}}
            @foreach([['aadhar_image','Aadhar Image'],['dl_front_image','Driving License front'],['dl_back_image','Driving License back']] as [$field,$label])
            <div class="col-md-4">
                <div class="pd-field-label mb-2">{{ $label }} (Image size 600×450)</div>
                @if($person->$field)
                    <a href="{{ asset($person->$field) }}" target="_blank">
                        <img src="{{ asset($person->$field) }}" alt="{{ $label }}" class="pd-doc-img">
                    </a>
                @else
                    <div class="pd-doc-placeholder">
                        <i class="ri-image-line"></i>
                    </div>
                @endif
            </div>
            @endforeach
        </div>
    </div>

    {{-- Orders Info --}}
    <div class="pd-section-title mb-3">Orders Info</div>

    <div class="d-flex align-items-center justify-content-between mb-3 flex-wrap gap-2">
        <div class="d-flex align-items-center gap-2 flex-wrap">
            <div class="table-search-box" style="min-width:240px;">
                <img class="table-search-icon" src="{{ asset('backend/template/svg-icon/search.svg') }}" alt="search">
                <input type="text" placeholder="Search by user ID or name" class="table-search-input">
            </div>
            <div class="table-search-box" style="width:180px;gap:8px;">
                <input type="date" class="table-search-input" style="color:#6b7280;">
                <i class="ri-calendar-line" style="color:#9ca3af;font-size:16px;flex-shrink:0;"></i>
            </div>
            <select class="table-filter-select" style="width:160px;">
                <option value="">All Zones</option>
                @foreach(\App\Models\DeliveryZone::where('status','active')->orderBy('name')->get() as $zone)
                    <option value="{{ $zone->id }}">{{ $zone->name }}</option>
                @endforeach
            </select>
        </div>
        <div class="d-flex align-items-center gap-2">
            <span style="font-size:13px;color:#6b7280;">Show</span>
            <select class="table-filter-select" style="width:72px;">
                @foreach([10,25,50,100] as $n)<option value="{{ $n }}">{{ $n }}</option>@endforeach
            </select>
            <span style="font-size:13px;color:#6b7280;">entries</span>
        </div>
    </div>

    <div class="card-border1" style="overflow:hidden;">
        <div class="table-responsive">
            <table class="table align-middle mb-0" style="min-width:1000px;">
                <thead class="all-table-head">
                    <tr>
                        <th class="table-head-content" style="width:40px;">
                            <input type="checkbox" class="form-check-input">
                        </th>
                        <th class="table-head-content">Order ID</th>
                        <th class="table-head-content">Customer Details</th>
                        <th class="table-head-content">Payment Mode</th>
                        <th class="table-head-content">Total Qty</th>
                        <th class="table-head-content">Total Order Value</th>
                        <th class="table-head-content">Under Delivery Zone</th>
                        <th class="table-head-content">Order Status</th>
                        <th class="table-head-content">Status updated On</th>
                        <th class="table-head-content">Action</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td colspan="10" class="text-center text-muted py-5">No orders found.</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

</section>

{{-- Status Modal --}}
<div class="modal fade" id="statusModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered" style="max-width:420px;">
        <div class="modal-content custom-modal">
            <div class="modal-header" id="statusModalHeader" style="height:60px;">
                <h5 class="mt-2" id="statusModalTitle"></h5>
            </div>
            <div class="modal-body"><p id="statusModalBody" class="mb-1"></p></div>
            <div class="modal-footer custom-footer">
                <button class="btn-cancel" data-bs-dismiss="modal">Cancel</button>
                <button id="statusConfirmBtn" class="btn-inactive-action">Confirm</button>
            </div>
        </div>
    </div>
</div>

{{-- Delete Modal --}}
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered" style="max-width:420px;">
        <div class="modal-content custom-modal">
            <div class="modal-header delete-header" style="height:60px;"><h5 class="mt-2">Delete Person?</h5></div>
            <div class="modal-body">
                <p>Are you sure you want to delete <strong>{{ $person->name }}</strong>? This action cannot be undone.</p>
            </div>
            <div class="modal-footer custom-footer">
                <button class="btn-cancel" data-bs-dismiss="modal">Cancel</button>
                <button id="deleteConfirmBtn" class="btn-delete-action">Delete Person</button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
const CSRF       = "{{ csrf_token() }}";
const STATUS_URL = "{{ route('backend.template.delivery-team.status', $person->id) }}";
const DELETE_URL = "{{ route('backend.template.delivery-team.destroy', $person->id) }}";
const INDEX_URL  = "{{ route('backend.template.delivery-team.index') }}";

@if(session('success'))
    toastr.success("{{ session('success') }}");
@endif

let nextStatus = null;

function openStatusModal(next) {
    nextStatus = next;
    const isInact = next === 'inactive';
    $('#statusModalTitle').text(isInact ? 'Inactivate Person' : 'Activate Person');
    $('#statusModalHeader').attr('class', 'modal-header ' + (isInact ? 'inactive-header' : 'activate-header'));
    $('#statusModalBody').html(isInact
        ? 'Are you sure you want to inactivate <strong>{{ $person->name }}</strong>?'
        : 'Are you sure you want to activate <strong>{{ $person->name }}</strong>?');
    $('#statusConfirmBtn').attr('class', isInact ? 'btn-inactive-action' : 'btn-activate-action')
                         .text(isInact ? 'Inactivate' : 'Activate');
    new bootstrap.Modal(document.getElementById('statusModal')).show();
}

$('#statusConfirmBtn').on('click', function () {
    $(this).prop('disabled', true);
    $.ajax({
        url: STATUS_URL, type: 'POST',
        data: { _token: CSRF, _method: 'PATCH', status: nextStatus },
        success: function () { toastr.success('Status updated.'); setTimeout(() => location.reload(), 700); },
        error:   function () { toastr.error('Failed.'); $('#statusConfirmBtn').prop('disabled', false); }
    });
});

function openDeleteModal() { new bootstrap.Modal(document.getElementById('deleteModal')).show(); }

$('#deleteConfirmBtn').on('click', function () {
    $(this).prop('disabled', true).text('Deleting…');
    $.ajax({
        url: DELETE_URL, type: 'POST',
        data: { _token: CSRF, _method: 'DELETE' },
        success: function () { toastr.success('Person deleted.'); setTimeout(() => window.location.href = INDEX_URL, 700); },
        error:   function () { toastr.error('Failed.'); $('#deleteConfirmBtn').prop('disabled', false).text('Delete Person'); }
    });
});
</script>
@endsection