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

@section('content')
<section>

    <div class="page-head-title mb-3">
        <a href="{{ route('backend.template.delivery-team.index') }}" 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>Add New Person
            </h2>
        </a>
    </div>

    <form method="POST" action="{{ route('backend.template.delivery-team.store') }}"
          enctype="multipart/form-data" id="createPersonForm">
        @csrf

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

                {{-- Row 1 --}}
                <div class="col-md-4">
                    <label class="form-label-modal">Delivery Person ID</label>
                    <input type="text" class="form-control custom-input" value="{{ $nextCode }}" 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') }}" 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') }}" placeholder="Enter contact number">
                    @error('contact_number')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                {{-- Row 2 --}}
                <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') }}" 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') }}" 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') == $zone->id ? 'selected' : '' }}>
                                {{ $zone->name }}
                            </option>
                        @endforeach
                    </select>
                    @error('zone_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                {{-- Row 3: Person Image + Address --}}
                <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 @error('person_image') border-danger @enderror"
                         id="personImgBox">
                        <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>
                        <input type="file" name="person_image" class="d-none fileInput" accept="image/png,image/jpeg,image/jpg">
                    </div>
                    @error('person_image')<div class="text-danger mt-1" style="font-size:12px;">{{ $message }}</div>@enderror
                </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') }}</textarea>
                    @error('address')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                {{-- Row 4 --}}
                <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') }}">
                </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') === 'male'   ? 'selected' : '' }}>Male</option>
                        <option value="female" {{ old('gender') === 'female' ? 'selected' : '' }}>Female</option>
                        <option value="other"  {{ old('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', 'active') === 'active'   ? 'selected' : '' }}>Active</option>
                        <option value="inactive" {{ old('status') === 'inactive' ? 'selected' : '' }}>Inactive</option>
                    </select>
                </div>

                {{-- Row 5: Document Images --}}
                <div class="col-md-4">
                    <label class="form-label-modal">Aadhar Image (Image size: 600×450)</label>
                    <div class="upload-dropzone text-center rounded-3 position-relative uploadBox" id="aadharImgBox">
                        <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>
                        <input type="file" name="aadhar_image" class="d-none fileInput" accept="image/png,image/jpeg,image/jpg">
                    </div>
                </div>
                <div class="col-md-4">
                    <label class="form-label-modal">
                        Driving License front (Image size: 600×450) <span class="color-red">*</span>
                    </label>
                    <div class="upload-dropzone text-center rounded-3 position-relative uploadBox @error('dl_front_image') border-danger @enderror"
                         id="dlFrontImgBox">
                        <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>
                        <input type="file" name="dl_front_image" class="d-none fileInput" accept="image/png,image/jpeg,image/jpg">
                    </div>
                    @error('dl_front_image')<div class="text-danger mt-1" style="font-size:12px;">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-4">
                    <label class="form-label-modal">
                        Driving License back (Image size: 600×450) <span class="color-red">*</span>
                    </label>
                    <div class="upload-dropzone text-center rounded-3 position-relative uploadBox @error('dl_back_image') border-danger @enderror"
                         id="dlBackImgBox">
                        <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>
                        <input type="file" name="dl_back_image" class="d-none fileInput" accept="image/png,image/jpeg,image/jpg">
                    </div>
                    @error('dl_back_image')<div class="text-danger mt-1" style="font-size:12px;">{{ $message }}</div>@enderror
                </div>

            </div>
        </div>

        {{-- Footer buttons --}}
        <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.index') }}" class="button-outline">Cancel</a>
            <button type="submit" class="button-green px-4">Add 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('createPersonForm').submit();
}

// ── Image Upload ──────────────────────────────────────────────────────────────
document.querySelectorAll('.uploadBox').forEach(function (box) {
    const input      = box.querySelector('.fileInput');
    const preview    = box.querySelector('.previewImage');
    const content    = box.querySelector('.uploadContent');
    const 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