@extends('backend.template.layouts.template-base')
@section('title', 'Delivery Team - Edit Person')

@section('content')
<section>

    <div class="page-head-title mb-3">
        <a href="{{ route('backend.template.delivery-team.detail', $person->id) }}" class="d-inline-block">
            <h2 class="text-title fw-semibold mb-0 d-flex align-items-center">
                <i class="ri-arrow-left-s-line fs-1 me-1"></i>Edit Person
            </h2>
        </a>
    </div>

    <form method="POST" action="{{ route('backend.template.delivery-team.update', $person->id) }}"
          enctype="multipart/form-data" id="editPersonForm">
        @csrf

        <div class="card-border p-3 mb-3">
            <div class="row g-4">

                <div class="col-md-4">
                    <label class="form-label-modal">Delivery Person ID</label>
                    <input type="text" class="form-control custom-input" value="{{ $person->person_code }}" disabled>
                </div>
                <div class="col-md-4">
                    <label class="form-label-modal">Person Name <span class="color-red">*</span></label>
                    <input type="text" name="name"
                           class="form-control custom-input @error('name') is-invalid @enderror"
                           value="{{ old('name', $person->name) }}" placeholder="Enter person name">
                    @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-4">
                    <label class="form-label-modal">Contact Number <span class="color-red">*</span></label>
                    <input type="tel" name="contact_number"
                           class="form-control custom-input @error('contact_number') is-invalid @enderror"
                           value="{{ old('contact_number', $person->contact_number) }}" placeholder="Enter contact number">
                    @error('contact_number')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                <div class="col-md-4">
                    <label class="form-label-modal">Alternate Contact Number</label>
                    <input type="tel" name="alternate_contact" class="form-control custom-input"
                           value="{{ old('alternate_contact', $person->alternate_contact) }}"
                           placeholder="Enter alternate contact number">
                </div>
                <div class="col-md-4">
                    <label class="form-label-modal">Email Address <span class="color-red">*</span></label>
                    <input type="email" name="email"
                           class="form-control custom-input @error('email') is-invalid @enderror"
                           value="{{ old('email', $person->email) }}" placeholder="Enter email address">
                    @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-4">
                    <label class="form-label-modal">Zone <span class="color-red">*</span></label>
                    <select name="zone_id" class="form-select custom-input @error('zone_id') is-invalid @enderror">
                        <option value="">Select</option>
                        @foreach($zones as $zone)
                            <option value="{{ $zone->id }}"
                                {{ old('zone_id', $person->zone_id) == $zone->id ? 'selected' : '' }}>
                                {{ $zone->name }}
                            </option>
                        @endforeach
                    </select>
                    @error('zone_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                <div class="col-md-6">
                    <label class="form-label-modal">Person Image (Image size: 600×450) <span class="color-red">*</span></label>
                    <div class="upload-dropzone text-center rounded-3 position-relative uploadBox">
                        @if($person->person_image)
                            <img src="{{ asset($person->person_image) }}" class="img-fluid previewImage" style="max-height:140px;">
                            <div class="uploadContent d-none">
                                <img src="{{ asset('backend/template/images/svg/img.svg') }}" width="32">
                                <p class="mb-1 mt-2 fw-semibold" style="font-size:14px;">Click to Upload or drag and drop</p>
                                <small class="text-muted">PNG, JPG or JPEG. Max 2MB</small>
                            </div>
                            <button type="button" class="replace-btn replaceBtn">Replace Image</button>
                        @else
                            <img src="" class="img-fluid d-none previewImage" style="max-height:140px;">
                            <div class="uploadContent">
                                <img src="{{ asset('backend/template/images/svg/img.svg') }}" width="32">
                                <p class="mb-1 mt-2 fw-semibold" style="font-size:14px;">Click to Upload or drag and drop</p>
                                <small class="text-muted">Upload image format should be only PNG, JPG or JPEG.<br>Also, max file size should be 2MB</small>
                            </div>
                            <button type="button" class="replace-btn d-none replaceBtn">Replace Image</button>
                        @endif
                        <input type="file" name="person_image" class="d-none fileInput" accept="image/png,image/jpeg,image/jpg">
                    </div>
                </div>
                <div class="col-md-6">
                    <label class="form-label-modal">Address <span class="color-red">*</span></label>
                    <textarea name="address" rows="7"
                              class="form-control custom-input taxtarea-resize @error('address') is-invalid @enderror"
                              placeholder="Enter your address here">{{ old('address', $person->address) }}</textarea>
                    @error('address')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                <div class="col-md-4">
                    <label class="form-label-modal">DOB</label>
                    <input type="date" name="dob" class="form-control custom-input"
                           value="{{ old('dob', $person->dob?->format('Y-m-d')) }}">
                </div>
                <div class="col-md-4">
                    <label class="form-label-modal">Gender <span class="color-red">*</span></label>
                    <select name="gender" class="form-select custom-input @error('gender') is-invalid @enderror">
                        <option value="">Select</option>
                        <option value="male"   {{ old('gender', $person->gender) === 'male'   ? 'selected' : '' }}>Male</option>
                        <option value="female" {{ old('gender', $person->gender) === 'female' ? 'selected' : '' }}>Female</option>
                        <option value="other"  {{ old('gender', $person->gender) === 'other'  ? 'selected' : '' }}>Other</option>
                    </select>
                    @error('gender')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-4">
                    <label class="form-label-modal">Status <span class="color-red">*</span></label>
                    <select name="status" class="form-select custom-input">
                        <option value="active"   {{ old('status', $person->status) === 'active'   ? 'selected' : '' }}>Active</option>
                        <option value="inactive" {{ old('status', $person->status) === 'inactive' ? 'selected' : '' }}>Inactive</option>
                    </select>
                </div>

                @php $docFields = [['aadhar_image','Aadhar Image',''],['dl_front_image','Driving License front','*'],['dl_back_image','Driving License back','*']]; @endphp
                @foreach($docFields as [$field, $label, $req])
                <div class="col-md-4">
                    <label class="form-label-modal">{{ $label }} (Image size: 600×450) @if($req)<span class="color-red">*</span>@endif</label>
                    <div class="upload-dropzone text-center rounded-3 position-relative uploadBox">
                        @if($person->$field)
                            <img src="{{ asset($person->$field) }}" class="img-fluid previewImage" style="max-height:120px;">
                            <div class="uploadContent d-none">
                                <img src="{{ asset('backend/template/images/svg/img.svg') }}" width="28">
                                <p class="mb-1 mt-2 fw-semibold" style="font-size:13px;">Click to Upload or drag and drop</p>
                                <small class="text-muted">PNG, JPG or JPEG. Max 2MB</small>
                            </div>
                            <button type="button" class="replace-btn replaceBtn">Replace Image</button>
                        @else
                            <img src="" class="img-fluid d-none previewImage" style="max-height:120px;">
                            <div class="uploadContent">
                                <img src="{{ asset('backend/template/images/svg/img.svg') }}" width="28">
                                <p class="mb-1 mt-2 fw-semibold" style="font-size:13px;">Click to Upload or drag and drop</p>
                                <small class="text-muted">Upload image format should be only PNG, JPG or JPEG.<br>Also, max file size should be 2MB</small>
                            </div>
                            <button type="button" class="replace-btn d-none replaceBtn">Replace Image</button>
                        @endif
                        <input type="file" name="{{ $field }}" class="d-none fileInput" accept="image/png,image/jpeg,image/jpg">
                    </div>
                </div>
                @endforeach

            </div>
        </div>

        <div class="d-flex justify-content-end align-items-center gap-2 my-3">
            <button type="button" class="btn-save-draft" onclick="submitDraft()">Save as Draft</button>
            <a href="{{ route('backend.template.delivery-team.detail', $person->id) }}" class="button-outline">Cancel</a>
            <button type="submit" class="button-green px-4">Update Person</button>
        </div>

        <input type="hidden" name="save_as_draft" id="saveDraftFlag" value="0">
    </form>

</section>
@endsection

@section('scripts')
<script>
function submitDraft() {
    document.getElementById('saveDraftFlag').value = '1';
    document.getElementById('editPersonForm').submit();
}

document.querySelectorAll('.uploadBox').forEach(function (box) {
    const input = box.querySelector('.fileInput'), preview = box.querySelector('.previewImage'),
          content = box.querySelector('.uploadContent'), replaceBtn = box.querySelector('.replaceBtn');

    box.addEventListener('click', function (e) { if (!e.target.classList.contains('replaceBtn')) input.click(); });
    box.addEventListener('dragover',  function (e) { e.preventDefault(); box.classList.add('drag-active'); });
    box.addEventListener('dragleave', function ()  { box.classList.remove('drag-active'); });
    box.addEventListener('drop', function (e) {
        e.preventDefault(); box.classList.remove('drag-active');
        if (e.dataTransfer.files[0]) processFile(e.dataTransfer.files[0]);
    });
    input.addEventListener('change', function () { if (this.files[0]) processFile(this.files[0]); });
    replaceBtn.addEventListener('click', function (e) {
        e.stopPropagation(); input.value = '';
        preview.classList.add('d-none'); preview.src = '';
        content.classList.remove('d-none'); replaceBtn.classList.add('d-none');
    });

    function processFile(file) {
        if (!['image/png','image/jpeg','image/jpg'].includes(file.type)) { toastr.warning('Only PNG, JPG or JPEG files are allowed.'); return; }
        if (file.size > 2 * 1024 * 1024) { toastr.warning('File size must not exceed 2MB.'); return; }
        const dt = new DataTransfer(); dt.items.add(file); input.files = dt.files;
        const reader = new FileReader();
        reader.onload = function (e) {
            preview.src = e.target.result; preview.classList.remove('d-none');
            content.classList.add('d-none'); replaceBtn.classList.remove('d-none');
        };
        reader.readAsDataURL(file);
    }
});
</script>
@endsection