@extends('Admin.layout')
@section('content')

<div class="d-flex align-items-center mb-3">

    <a href="{{ route('edit_delivery_partner') }}" class="btn btn-icon bg-white me-2 shadow-sm">

        <svg xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="#000"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round">

            <path stroke="none"
                d="M0 0h24v24H0z"
                fill="none" />

            <path d="M15 6l-6 6l6 6" />
        </svg>
    </a>

    <h5 class="mb-0">Documents</h5>

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

    <!-- LEFT SIDE -->
    <div class="col-12 col-md-6">

        <div class="d-flex align-items-center gap-2">

            <!-- Profile Details -->
            <a href="{{route('edit_delivery_partner')}}"
                class="btn  d-flex align-items-center justify-content-center">

                <i class="ti tabler-user me-2"></i>
                <span>Profile Details</span>

            </a>


            <!-- Documents -->
            <a href="{{ route('edit_delivery_document') }}"
                class="btn btn-primary d-flex align-items-center justify-content-center">

                <i class="ti tabler-checklist me-2"></i>
                <span>Documents</span>

            </a>

        </div>

    </div>

    <div class="col-12 col-md-6">

        <div class="d-flex align-items-center justify-content-md-end gap-2 w-100">

            <button type="button"
                class="btn btn-light d-flex align-items-center justify-content-center  flex-fill flex-lg-grow-0" data-bs-toggle="modal" data-bs-target="#blockModal">

                <i class="ti tabler-ban me-2 text-light"></i>
                <span class="text-light">Block</span>

            </button>

            <button type="button"
                class="btn btn-danger d-flex align-items-center justify-content-center  flex-fill flex-lg-grow-0" data-bs-toggle="modal" data-bs-target="#delete">

                <i class="ti tabler-trash me-2"></i>
                <span>Delete</span>

            </button>

        </div>

    </div>

</div>

<div class="mb-3">
    <form action="{{route('edit_delivery_partner')}}">

        <div class="card">

            <div class="card-body p-3 p-md-4 p-lg-5">

                <div class="row g-3 g-md-4 justify-content-center p-3">


                    <div class="col-12 col-lg-4">

                        <div class="card border-0 shadow-sm h-100 overflow-hidden">

                            <div class="card-body p-3 p-md-4">

                                <h5 class="fw-semibold mb-3 fs-6 fs-md-5"> Upload Aadhar Card </h5>

                                <div id="aadhar_uploadArea" class="border border-warning rounded-4 bg-warning bg-opacity-10 p-3 p-md-4">

                                    <div id="aadhar_uploadContent" class="d-flex flex-column align-items-center justify-content-center text-center">

                                        <label for="aadhar_file" class="mb-2 cursor-pointer">

                                            <i class="ti tabler-upload text-warning fs-1"></i>

                                        </label>


                                        <input type="file"
                                            id="aadhar_file"
                                            name="aadhar_file"
                                            class="d-none"
                                            accept="image/jpeg,image/png,image/jpg"
                                            onchange="previewImage(event, 'aadhar')">


                                        <h5 class="mt-1 mb-2 fs-6 fs-md-5">Drop your file here </h5>


                                        <p class="text-secondary mb-1"> or </p>


                                        <p class="text-secondary mb-2 small"> Click the upload icon to browse</p>


                                        <p class="text-secondary mb-1 small">Supported formats:<strong>PDF, JPG, PNG</strong></p>


                                        <p class="text-secondary mb-0 small">Max file size:<strong>5 MB</strong></p>

                                    </div>


                                    <img id="aadhar_preview"
                                        src=""
                                        alt="Aadhar Card"
                                        class="img-fluid rounded-4 d-none w-100 object-fit-contain"
                                        style="max-height:200px;">

                                </div>

                                <div class="d-flex justify-content-end mt-2">

                                    <div class="btn-group border border-primary rounded-3">

                                        <button type="button"
                                            class="btn" data-bs-toggle="modal"
                                            data-bs-target="#downloadDocumentModal">

                                            <i class="ti tabler-download text-primary fs-5"></i>

                                        </button>


                                        <button type="button" class="btn" data-bs-toggle="modal" data-bs-target="#documentPreviewModal">
                                            <i class="ti tabler-eye text-info fs-5"></i>
                                        </button>

                                    </div>

                                </div>

                                <div class="row g-2 g-md-3 mt-3">

                                    <div class="col-6">

                                        <button type="button" class="btn btn-light w-100 text-secondary fw-semibold" data-bs-toggle="modal" data-bs-target="#rejectModal">Reject</button>

                                    </div>


                                    <div class="col-6">

                                        <button type="button" class="btn btn-primary w-100 text-white fw-semibold"> Approve </button>

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>

                    <div class="col-12 col-lg-4">

                        <div class="card border-0 shadow-sm h-100 overflow-hidden">

                            <div class="card-body p-3 p-md-4">

                                <h5 class="fw-semibold mb-3 mb-md-4 fs-6 fs-md-5"> Upload PAN Card</h5>

                                <div id="pan_uploadArea" class="border border-warning rounded-4 bg-warning bg-opacity-10 p-3 p-md-4">

                                    <div id="pan_uploadContent" class="d-flex flex-column align-items-center justify-content-center text-center">

                                        <label for="pan_file" class="mb-2 cursor-pointer">

                                            <i class="ti tabler-upload text-warning fs-1"></i>

                                        </label>


                                        <input type="file"
                                            id="pan_file"
                                            name="pan_file"
                                            class="d-none"
                                            accept="image/jpeg,image/png,image/jpg"
                                            onchange="previewImage(event, 'pan')">


                                        <h5 class="mt-1 mb-2 fs-6 fs-md-5">Drop your file here</h5>
                                        <p class="text-secondary mb-1">or</p>
                                        <p class="text-secondary mb-2 small">Click the upload icon to browse</p>
                                        <p class="text-secondary mb-1 small"> Supported formats:<strong>PDF, JPG, PNG</strong> </p>
                                        <p class="text-secondary mb-0 small">Max file size:<strong>5 MB</strong></p>

                                    </div>


                                    <img id="pan_preview"
                                        src=""
                                        alt="PAN Card"
                                        class="img-fluid rounded-4 d-none w-100 object-fit-contain"
                                        style="max-height:200px;">

                                </div>

                                <div class="d-flex justify-content-end mt-2">

                                    <div class="btn-group border border-primary rounded-3">

                                        <button type="button" class="btn" data-bs-toggle="modal" data-bs-target="#downloadDocumentModal">
                                            <i class="ti tabler-download text-primary fs-5"></i>

                                        </button>


                                        <button type="button" class="btn" data-bs-toggle="modal" data-bs-target="#documentPreviewModal">

                                            <i class="ti tabler-eye text-info fs-5"></i>

                                        </button>

                                    </div>

                                </div>

                                <div class="row g-2 g-md-3 mt-3">

                                    <div class="col-6">

                                        <button type="button" class="btn btn-light w-100 text-secondary fw-semibold" data-bs-toggle="modal" data-bs-target="#rejectModal">Reject </button>

                                    </div>


                                    <div class="col-6">

                                        <button type="button" class="btn btn-primary w-100 text-white fw-semibold">Approve </button>

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>

                    <div class="col-12 col-lg-4">

                        <div class="card border-0 shadow-sm h-100 overflow-hidden">

                            <div class="card-body p-3 p-md-4">

                                <h5 class="fw-semibold mb-3 mb-md-4 fs-6 fs-md-5">Upload License</h5>

                                <div id="license_uploadArea" class="border border-warning rounded-4 bg-warning bg-opacity-10 p-3 p-md-4">

                                    <div id="license_uploadContent" class="d-flex flex-column align-items-center justify-content-center text-center">

                                        <label for="license_file" class="mb-2 cursor-pointer">

                                            <i class="ti tabler-upload text-warning fs-1"></i>

                                        </label>

                                        <input type="file"
                                            id="license_file"
                                            name="license_file"
                                            class="d-none"
                                            accept="image/jpeg,image/png,image/jpg"
                                            onchange="previewImage(event, 'license')">
                                        <h5 class="mt-1 mb-2 fs-6 fs-md-5"> Drop your file here</h5>
                                        <p class="text-secondary mb-1">or</p>
                                        <p class="text-secondary mb-2 small"> Click the upload icon to browse</p>
                                        <p class="text-secondary mb-1 small">Supported formats:<strong>PDF, JPG, PNG</strong> </p>
                                        <p class="text-secondary mb-0 small">Max file size:<strong>5 MB</strong></p>

                                    </div>


                                    <img id="license_preview"
                                        src=""
                                        alt="license Certificate"
                                        class="img-fluid rounded-4 d-none w-100 object-fit-contain"
                                        style="max-height:200px;">

                                </div>

                                <div class="d-flex justify-content-end mt-2">

                                    <div class="btn-group border border-primary rounded-3">

                                        <button type="button" class="btn" data-bs-toggle="modal" data-bs-target="#downloadDocumentModal">

                                            <i class="ti tabler-download text-primary fs-5"></i>

                                        </button>


                                        <button type="button" class="btn" data-bs-toggle="modal" data-bs-target="#documentPreviewModal">

                                            <i class="ti tabler-eye text-info fs-5"></i>

                                        </button>

                                    </div>

                                </div>

                                <div class="row g-2 g-md-3 mt-3">

                                    <div class="col-6">

                                        <button type="button" class="btn btn-light w-100 text-secondary fw-semibold" data-bs-toggle="modal" data-bs-target="#rejectModal"> Reject </button>

                                    </div>

                                    <div class="col-6">
                                        <button type="button" class="btn btn-primary w-100 text-white fw-semibold"> Approve</button>
                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>


                </div>

            </div>

        </div>

        <div class="d-flex justify-content-end mt-4">
            <button class="btn btn-danger me-2">Reject</button>
            <button class="btn btn-success" type="submit">Approve</button>
        </div>

    </form>

</div>

<script>
    const documentImages = {
        aadhar: null,
        pan: null,
        license: null
    };

    function previewImage(event, type) {

        const input = event.target;
        const file = input.files[0];

        if (!file) {
            return;
        }

        const allowedTypes = [
            'image/jpeg',
            'image/png',
            'image/jpg'
        ];

        // File type validation
        if (!allowedTypes.includes(file.type)) {
            alert('Please upload JPG or PNG image only.');
            input.value = '';
            return;
        }

        // File size validation
        if (file.size > 5 * 1024 * 1024) {
            alert('Maximum file size is 5 MB.');
            input.value = '';
            return;
        }

        // Create image URL
        const imageUrl = URL.createObjectURL(file);

        documentImages[type] = imageUrl;

        // Get elements
        const uploadContent = document.getElementById(
            type + '_uploadContent'
        );

        const preview = document.getElementById(
            type + '_preview'
        );

        if (!preview) {
            return;
        }

        // Set selected image
        preview.src = imageUrl;

        // Hide upload icon + text
        if (uploadContent) {
            uploadContent.classList.add('d-none');
        }

        // Show only selected image
        preview.classList.remove('d-none');

        // Make selected image clickable
        preview.style.cursor = 'pointer';

        preview.onclick = function () {

            // Reset input so same image can also be selected again
            input.value = '';

            // Open file selector
            input.click();
        };
    }
</script>

@endsection