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

<div class="d-flex align-items-center mb-3">
    <a href="{{ route('add_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="d-flex flex-column flex-sm-row gap-2 gap-sm-3 my-4">

    <a href="{{ route('add_delivery_partner') }}" class="btn d-flex align-items-center justify-content-center justify-content-sm-start">
        <i class="ti tabler-user me-2"></i>
        <span>Profile Details</span>
    </a>

    <a href="#"
        class="btn btn-primary d-flex align-items-center justify-content-center justify-content-sm-start">
        <i class="ti tabler-checklist me-2"></i>
        <span>Documents</span>
    </a>

</div>

<div class="card">

    <div class="card-body p-5">

        <form action="#">

            <div class="row g-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 mb-md-4 fs-6 fs-md-5">Upload Aadhar Card </h5>
                            <div id="aadhar_uploadArea" class="border border-primary 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>

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

                            </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=".pdf,.jpg,.jpeg,.png" 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>
                                <input type="file" id="pan_file" name="pan_file" class="d-none" accept=".pdf,.jpg,.jpeg,.png" onchange="previewImage(event, 'pan')">

                            </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=".pdf,.jpg,.jpeg,.png"
                           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>

            </div>

        </div>

    </div>
</div>

            </div>

        </form>

    </div>

</div>

<script>
function previewImage(event, type) {

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

    if (!file) {
        return;
    }

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

    if (!allowedTypes.includes(file.type)) {

        alert('Please upload PDF, JPG, or PNG files only.');

        input.value = '';

        return;
    }

    if (file.size > 5 * 1024 * 1024) {

        alert('Maximum file size is 5 MB.');

        input.value = '';

        return;
    }

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

    const uploadArea = document.getElementById(
        type + '_uploadArea'
    );

    if (!uploadArea) {
        console.error('Upload area not found:', type);
        return;
    }

    /*
     * PDF
     */
    if (file.type === 'application/pdf') {

        if (uploadContent) {
            uploadContent.classList.add('d-none');
        }

        let pdfPreview = document.getElementById(
            type + '_pdfPreview'
        );

        if (!pdfPreview) {

            pdfPreview = document.createElement('div');

            pdfPreview.id = type + '_pdfPreview';

            pdfPreview.className =
                'd-flex flex-column align-items-center justify-content-center text-center p-3';

            uploadArea.appendChild(pdfPreview);
        }

        pdfPreview.innerHTML = `
            <i class="ti tabler-file-type-pdf text-danger fs-1"></i>

            <div class="fw-semibold mt-2">
                ${file.name}
            </div>

            <small class="text-secondary">
                ${(file.size / (1024 * 1024)).toFixed(2)} MB
            </small>
        `;

        pdfPreview.style.cursor = 'pointer';

        pdfPreview.onclick = function () {

            input.value = '';

            input.click();
        };

        return;
    }


    /*
     * Image
     */
    const imageUrl = URL.createObjectURL(file);

    if (uploadContent) {
        uploadContent.classList.add('d-none');
    }

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

    if (!preview) {

        preview = document.createElement('img');

        preview.id = type + '_preview';

        preview.className =
            'img-fluid rounded-4 w-100 object-fit-contain';

        preview.style.maxHeight = '200px';

        uploadArea.appendChild(preview);
    }

    preview.src = imageUrl;

    preview.style.cursor = 'pointer';

    preview.onclick = function () {

        input.value = '';

        input.click();
    };
}
</script>

@endsection