@extends('layouts.app')

@section('content')
<div class="d-flex flex-column flex-column-fluid">
    <!--begin::Toolbar-->
    <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
        <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
            <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                <h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">Agency Profile</h1>
                <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                    <li class="breadcrumb-item text-muted">
                        <a href="{{ route('dashboard') }}" class="text-muted text-hover-primary">Home</a>
                    </li>
                    <li class="breadcrumb-item"><span class="bullet bg-gray-500 w-5px h-2px"></span></li>
                    <li class="breadcrumb-item text-muted">Agency Documents</li>
                </ul>
            </div>
        </div>
    </div>
    <!--end::Toolbar-->

    <div id="kt_app_content" class="app-content flex-column-fluid">
        <div id="kt_app_content_container" class="app-container container-xxl">

            <!--begin::Navbar-->
            <div class="card mb-2 mb-xxl-8">
                <div class="card-body pt-9 pb-0">
                    @include('agent.header')
                </div>
            </div>
            <!--end::Navbar-->

            {{-- Toast Notification --}}
            @if(session()->has('success'))
            <div id="toast-success" style="position:fixed; top:20px; right:20px; z-index:9999; min-width:320px;"
                 class="alert bg-light-success border border-success d-flex align-items-center p-4 shadow rounded">
                <i class="ki-duotone ki-shield-tick fs-2x text-success me-3">
                    <span class="path1"></span><span class="path2"></span>
                </i>
                <span class="fw-semibold text-success">{{ session()->get('success') }}</span>
            </div>
            @endif

            @if(session()->has('error'))
            <div id="toast-error" style="position:fixed; top:20px; right:20px; z-index:9999; min-width:320px;"
                 class="alert bg-light-danger border border-danger d-flex align-items-center p-4 shadow rounded">
                <i class="ki-duotone ki-cross-circle fs-2x text-danger me-3">
                    <span class="path1"></span><span class="path2"></span>
                </i>
                <span class="fw-semibold text-danger">{{ session()->get('error') }}</span>
            </div>
            @endif
<!-- important document -->
@php
    $uploadedTypes = $documents ? $documents->pluck('document_type')->toArray() : [];
    $mandatoryDocs = [
        'company_registration' => 'Company Registration',
        'gst_proof'            => 'GST Document',
        'id_proof'             => 'ID Proof',
        'tax_proof'            => 'Tax / PAN Proof',
        'passport'             => 'Passport',
    ];
@endphp

<div class="card mb-4" style="border: 1px solid #EF9F27; border-radius: 10px;">
    <div class="card-body py-3 px-4">

        <h6 class="fw-bold mb-1" style="color: #d10d0d;">
            <i class="bi bi-exclamation-triangle-fill me-2" style="color: #d10d0d;"></i>
            Important Note
        </h6>

        <p class="mb-2" style="font-size: 13px; color: #854F0B;">
            Mandatory: Please upload the following documents before proceeding.
        </p>

        <div class="row row-cols-4 g-2">
            @foreach($mandatoryDocs as $type => $label)
                <div class="col">
                    <div class="d-flex align-items-center gap-2" style="font-size: 13px; color: #412402;">
                        <span style="width:7px; height:7px; border-radius:50%; background:#BA7517; flex-shrink:0; display:inline-block;"></span>
                        {{ $label }}
                    </div>
                </div>
            @endforeach
        </div>

    </div>
</div>


            <div class="row g-5 g-xxl-8">
                <div class="col-xl-12">
                    <div class="card">
                        <!--begin::Card header-->
                        <div class="card-header border-bottom border-gray-200">
                            <div class="card-title">
                                <h3 class="fw-bold m-0">
                                    <i class="bi bi-file-earmark-arrow-up text-info me-2"></i>Agency Documents
                                </h3>
                            </div>
                            <div class="card-toolbar">
                                <button type="button" class="btn btn-primary btn-sm"
                                        data-bs-toggle="modal"
                                        data-bs-target="#kt_modal_upload_document">
                                    <i class="bi bi-upload me-1"></i> Upload Document
                                </button>
                            </div>
                        </div>
                        <!--end::Card header-->

                        <div class="card-body py-6">
                            @if($documents && $documents->count() > 0)
                            <div class="table-responsive">
                                <table class="table table-row-bordered align-middle gy-4 gs-7">
                                    <thead class="border-bottom border-gray-200 fs-6 text-gray-600 fw-bold bg-light bg-opacity-75">
                                        <tr class="text-start fs-7 text-uppercase">
                                            <th class="min-w-30px">#</th>
                                            <th class="min-w-200px">Document Name</th>
                                            <th class="min-w-150px">Type</th>
                                            <th class="min-w-120px">Status</th>
                                            <th class="min-w-120px">Uploaded On</th>
                                            <th class="min-w-100px text-end">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody class="fw-semibold text-gray-600">
                                        @foreach($documents as $doc)
                                        <tr>
                                            <td>{{ $loop->iteration }}</td>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <i class="bi bi-file-earmark-text fs-2 text-primary me-3"></i>
                                                    <div>
                                                        <span class="fw-bold text-gray-800 d-block">{{ $doc->document_name ?? basename($doc->file_path) }}</span>
                                                        @if(array_key_exists($doc->document_type, $mandatoryDocs))
                                                            <span class="badge badge-light-warning fs-8">Mandatory</span>
                                                        @endif
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <span class="badge badge-light-info fw-bold">
                                                    {{ strtoupper(str_replace('_', ' ', $doc->document_type ?? 'Document')) }}
                                                </span>
                                            </td>
                                            <td>
                                                <span class="badge badge-light-success fw-bold">
                                                    <i class="bi bi-check-circle me-1"></i> Uploaded
                                                </span>
                                            </td>
                                            <td>{{ $doc->created_at->format('d M Y') }}</td>
                                            <td class="text-end">
                                                {{-- View only — NO delete for agent --}}
                                                <a href="{{ asset('storage/agency_documents/' . $doc->file_path) }}"
                                                   target="_blank"
                                                   class="btn btn-sm btn-light-primary">
                                                    <i class="bi bi-eye"></i> View
                                                </a>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            @else
                            <div class="text-center py-15">
                                <i class="bi bi-folder2-open fs-2x text-muted d-block mb-3"></i>
                                <p class="text-muted fs-5 mb-4">No documents uploaded yet.</p>
                                <button type="button" class="btn btn-primary btn-sm"
                                        data-bs-toggle="modal"
                                        data-bs-target="#kt_modal_upload_document">
                                    <i class="bi bi-upload me-1"></i> Upload First Document
                                </button>
                            </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<!--begin::Modal Upload Document-->
<div class="modal fade" id="kt_modal_upload_document" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered mw-550px">
        <div class="modal-content">
            <div class="modal-header">
                <h2><i class="bi bi-file-earmark-arrow-up text-primary me-2"></i>Upload Document</h2>
                <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                    <i class="ki-duotone ki-cross fs-1"><span class="path1"></span><span class="path2"></span></i>
                </div>
            </div>
            <div class="modal-body mx-5 my-7">

                

                <form method="POST"
                      action="{{ route('agent.agency.documents.store', $agency->uuid) }}"
                      enctype="multipart/form-data"
                      id="uploadDocumentForm">
                    @csrf

                    <div class="mb-4">
                        <label class="form-label fw-semibold">Document Name <span class="text-danger">*</span></label>
                        <input type="text"
                               name="document_name"
                               class="form-control"
                               placeholder="e.g. Trade License, Tax Proof"
                               required>
                    </div>

                    <div class="mb-4">
                        <label class="form-label fw-semibold">Document Type <span class="text-danger">*</span></label>
                        <select name="document_type" class="form-control" required>
                            <option value="">-- Select Type --</option>
                            <optgroup label="⚠️ Mandatory Documents">
                                <option value="company_registration" {{ in_array('company_registration', $uploadedTypes) ? 'disabled' : '' }}>
                                    Company Registration {{ in_array('company_registration', $uploadedTypes) ? '✔ Uploaded' : '(Required)' }}
                                </option>
                                <option value="gst_proof" {{ in_array('gst_proof', $uploadedTypes) ? 'disabled' : '' }}>
                                    GST Document {{ in_array('gst_proof', $uploadedTypes) ? '✔ Uploaded' : '(Required)' }}
                                </option>
                                <option value="id_proof" {{ in_array('id_proof', $uploadedTypes) ? 'disabled' : '' }}>
                                    ID Proof {{ in_array('id_proof', $uploadedTypes) ? '✔ Uploaded' : '(Required)' }}
                                </option>
                                <option value="tax_proof" {{ in_array('tax_proof', $uploadedTypes) ? 'disabled' : '' }}>
                                    Tax / PAN Proof {{ in_array('tax_proof', $uploadedTypes) ? '✔ Uploaded' : '(Required)' }}
                                </option>
                                <option value="passport" {{ in_array('passport', $uploadedTypes) ? 'disabled' : '' }}>
                                    Passport {{ in_array('passport', $uploadedTypes) ? '✔ Uploaded' : '(Required)' }}
                                </option>
                            </optgroup>
                            <optgroup label="Other Documents">
                                <option value="trade_license">Trade License</option>
                                <option value="other">Other</option>
                            </optgroup>
                        </select>
                    </div>

                    <div class="mb-4">
                        <label class="form-label fw-semibold">Upload File <span class="text-danger">*</span></label>
                        <input type="file"
                               name="document_file"
                               class="form-control"
                               accept=".pdf,.jpg,.jpeg,.png,.doc,.docx"
                               required>
                        <div class="form-text text-muted">Allowed: PDF, JPG, PNG, DOC, DOCX. Max: 5MB</div>
                    </div>

                    <div class="text-center pt-4">
                        <button type="button" class="btn btn-light me-3" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-upload me-1"></i> Upload
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!--end::Modal Upload Document-->

@endsection

@section('scripts')
<script>
$(document).ready(function () {

    // Auto close toast after 3 seconds
    setTimeout(function () {
        ['toast-success', 'toast-error'].forEach(function(id) {
            let el = document.getElementById(id);
            if (el) {
                el.style.transition = 'opacity 0.5s ease';
                el.style.opacity = '0';
                setTimeout(function () { el.remove(); }, 500);
            }
        });
    }, 3000);

    // Form validation
    $('#uploadDocumentForm').on('submit', function (e) {
        let isValid = true;
        $('.doc-error').remove();
        $('.form-control').removeClass('is-invalid');

        $(this).find('input[required], select[required]').each(function () {
            if ($(this).val() === '' || $(this).val() === null) {
                $(this).addClass('is-invalid');
                $(this).after('<div class="text-danger mt-1 doc-error">This field is required.</div>');
                isValid = false;
            }
        });

        if (!isValid) e.preventDefault();
    });

    // Clear on modal close
    $('#kt_modal_upload_document').on('hidden.bs.modal', function () {
        $('.doc-error').remove();
        $('.form-control').removeClass('is-invalid');
        $('#uploadDocumentForm')[0].reset();
    });

});
</script>
@endsection