@extends('layouts.masterbeta')

@section('title', 'Nexus ERP - Document Vault')

@push('styles')
    <style>
        .file-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 1.25rem; }
        .icon-pdf { background-color: rgba(239, 68, 68, 0.1); color: #ef4444; }
        .icon-word { background-color: rgba(59, 130, 246, 0.1); color: #3b82f6; }
        .icon-img { background-color: rgba(16, 185, 129, 0.1); color: #10b981; }
        
        .sync-badge { font-size: 0.7rem; padding: 0.25rem 0.5rem; border-radius: 4px; display: inline-flex; align-items: center; gap: 4px; }
    </style>
@endpush

@section('breadcrumbs')
    <a href="{{ url('/') }}" class="text-secondary text-decoration-none"><i class="bi bi-house me-2"></i></a>
    <i class="bi bi-chevron-right text-secondary me-2" style="font-size: 0.8rem;"></i>
    <a href="#" class="text-secondary text-decoration-none me-2" style="font-size: 0.95rem;">Resources</a>
    <i class="bi bi-chevron-right text-secondary me-2" style="font-size: 0.8rem;"></i>
    <span class="fw-bold" style="font-size: 0.95rem;">Document Vault</span>
@endsection

@section('content')
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="fw-bold mb-1">Document Vault</h4>
            <p class="text-secondary mb-0" style="font-size: 0.9rem;">Manage corporate files, SLA agreements, and compliance records.</p>
        </div>
        <button class="btn text-white fw-bold d-flex align-items-center" style="background-color: #5c4df0; border-radius: 8px;" id="btnOpenDocModal">
            <i class="bi bi-cloud-upload me-2"></i> Upload File
        </button>
    </div>

    <div class="row g-4 mb-4">
        <div class="col-xl-3 col-md-6">
            <div class="content-card p-3 h-100 border-0">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <div class="text-secondary fw-bold" style="font-size: 0.75rem; letter-spacing: 0.5px;">TOTAL FILES</div>
                    <i class="bi bi-files text-secondary"></i>
                </div>
                <h3 class="fw-bold mb-0">1,248</h3>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="content-card p-3 h-100 border-0">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <div class="text-secondary fw-bold" style="font-size: 0.75rem; letter-spacing: 0.5px;">STORAGE USED</div>
                    <i class="bi bi-hdd-network text-primary"></i>
                </div>
                <h3 class="fw-bold mb-0">4.2 GB <span class="fs-6 fw-normal text-secondary">/ 50 GB</span></h3>
                <div class="progress mt-2" style="height: 4px;">
                    <div class="progress-bar bg-primary" role="progressbar" style="width: 8.4%"></div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="content-card p-3 h-100 border-0">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <div class="text-secondary fw-bold" style="font-size: 0.75rem; letter-spacing: 0.5px;">PAPERLESS-NGX SYNC</div>
                    <i class="bi bi-box-arrow-up-right text-success"></i>
                </div>
                <h3 class="fw-bold mb-0">892 <span class="fs-6 fw-normal text-secondary">Archived</span></h3>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="content-card p-3 h-100 border-0 bg-primary bg-opacity-10">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <div class="text-primary fw-bold" style="font-size: 0.75rem; letter-spacing: 0.5px;">PENDING REVIEW</div>
                    <i class="bi bi-clock-history text-primary"></i>
                </div>
                <h3 class="fw-bold text-primary mb-0">14</h3>
            </div>
        </div>
    </div>

    <div class="content-card">
        <div class="p-3 border-bottom bg-light bg-opacity-50">
            <div class="row g-3">
                <div class="col-md-5">
                    <div class="input-group">
                        <span class="input-group-text bg-white border-end-0 text-secondary"><i class="bi bi-search"></i></span>
                        <input type="text" class="form-control bg-white border-start-0 ps-0" placeholder="Search filenames, tags, or entities...">
                    </div>
                </div>
                <div class="col-md-3">
                    <select class="form-select bg-white">
                        <option value="">All Document Types</option>
                        <option value="contract">Contracts & SLAs</option>
                        <option value="kyc">KYC & Identity</option>
                        <option value="invoice">Invoices</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <select class="form-select bg-white">
                        <option value="">Status: All</option>
                        <option value="synced">Archived in Paperless</option>
                        <option value="local">Local Only</option>
                    </select>
                </div>
                <div class="col-md-1">
                    <button class="btn btn-secondary w-100"><i class="bi bi-funnel"></i></button>
                </div>
            </div>
        </div>

        <div class="table-responsive">
            <table class="table table-custom table-hover mb-0">
                <thead>
                    <tr>
                        <th>File Details</th>
                        <th>Related Entity</th>
                        <th>Category</th>
                        <th>Size / Date</th>
                        <th>Archive Status</th>
                        <th class="text-end">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <div class="d-flex align-items-center">
                                <div class="file-icon icon-pdf me-3"><i class="bi bi-file-earmark-pdf-fill"></i></div>
                                <div>
                                    <div class="fw-bold text-dark">MTN_SIP_Trunk_SLA_2026.pdf</div>
                                    <div class="text-secondary" style="font-size: 0.75rem;">ID: DOC-9942</div>
                                </div>
                            </div>
                        </td>
                        <td><span class="badge bg-dark bg-opacity-10 text-dark border"><i class="bi bi-broadcast-pin me-1"></i>MNO: MTN Ghana</span></td>
                        <td><span class="badge bg-primary bg-opacity-10 text-primary">SLA Contract</span></td>
                        <td>
                            <div class="text-dark fw-semibold" style="font-size: 0.85rem;">2.4 MB</div>
                            <div class="text-secondary" style="font-size: 0.75rem;">Jun 15, 2026</div>
                        </td>
                        <td>
                            <span class="sync-badge bg-success bg-opacity-10 text-success border border-success-subtle">
                                <i class="bi bi-check-circle-fill"></i> Synced to Paperless
                            </span>
                        </td>
                        <td class="text-end">
                            <button class="btn btn-sm btn-light text-secondary me-1" title="Download"><i class="bi bi-download"></i></button>
                            <button class="btn btn-sm btn-light text-primary me-1 btn-edit-doc" 
                                data-id="1" data-filename="MTN_SIP_Trunk_SLA_2026.pdf" data-entity="mno_1" data-type="contract" data-notes="Signed copy for 2026 SIP links.">
                                <i class="bi bi-pencil"></i>
                            </button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="d-flex align-items-center">
                                <div class="file-icon icon-word me-3"><i class="bi bi-file-earmark-word-fill"></i></div>
                                <div>
                                    <div class="fw-bold text-dark">ClickTech_Hosting_Proposal_Draft.docx</div>
                                    <div class="text-secondary" style="font-size: 0.75rem;">ID: DOC-9943</div>
                                </div>
                            </div>
                        </td>
                        <td><span class="badge bg-info bg-opacity-10 text-info border border-info-subtle"><i class="bi bi-people me-1"></i>Client: Click Tech</span></td>
                        <td><span class="badge bg-secondary bg-opacity-10 text-secondary">Draft / Proposal</span></td>
                        <td>
                            <div class="text-dark fw-semibold" style="font-size: 0.85rem;">850 KB</div>
                            <div class="text-secondary" style="font-size: 0.75rem;">Jun 18, 2026</div>
                        </td>
                        <td>
                            <span class="sync-badge bg-secondary bg-opacity-10 text-secondary border">
                                <i class="bi bi-hdd"></i> Local Storage Only
                            </span>
                        </td>
                        <td class="text-end">
                            <button class="btn btn-sm btn-light text-secondary me-1" title="Download"><i class="bi bi-download"></i></button>
                            <button class="btn btn-sm btn-light text-primary me-1 btn-edit-doc"
                                data-id="2" data-filename="ClickTech_Hosting_Proposal_Draft.docx" data-entity="client_1" data-type="draft" data-notes="Awaiting feedback before finalizing.">
                                <i class="bi bi-pencil"></i>
                            </button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
@endsection

@push('modals')
    <div class="modal fade" id="docModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-light">
                    <h5 class="modal-title fw-bold" id="docModalTitle">Upload Document</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                
                <form id="docForm" enctype="multipart/form-data">
                    <div class="modal-body p-4">
                        <input type="hidden" id="docId" name="id">
                        <input type="hidden" id="docMethod" name="_method" value="POST">
                        
                        <div class="mb-4">
                            <label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Select File</label>
                            <input class="form-control" type="file" id="docFile" name="file">
                            <div class="form-text" id="fileHelpText">Max size: 10MB. Allowed: PDF, DOCX, PNG, JPG.</div>
                        </div>

                        <div class="row g-3 mb-3">
                            <div class="col-md-6">
                                <label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Document Type *</label>
                                <select class="form-select" id="docType" name="type" required>
                                    <option value="" selected disabled>Select...</option>
                                    <option value="contract">SLA / Contract</option>
                                    <option value="draft">Draft Proposal</option>
                                    <option value="kyc">KYC / Identity</option>
                                    <option value="invoice">Invoice</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Related Entity</label>
                                <select class="form-select" id="docEntity" name="entity_id">
                                    <option value="">General (None)</option>
                                    <optgroup label="MNO Partners">
                                        <option value="mno_1">MTN Ghana</option>
                                        <option value="mno_2">Telecel Ghana</option>
                                    </optgroup>
                                    <optgroup label="Clients">
                                        <option value="client_1">Click Tech Corp</option>
                                    </optgroup>
                                </select>
                            </div>
                        </div>

                        <div class="mb-4">
                            <label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Notes & Description</label>
                            <textarea class="form-control" id="docNotes" name="notes" rows="2" placeholder="Optional context about this file..."></textarea>
                        </div>

                        <div class="p-3 bg-light rounded border border-secondary-subtle">
                            <div class="form-check form-switch d-flex align-items-center mb-0">
                                <input class="form-check-input mt-0 me-3" type="checkbox" role="switch" id="pushToPaperless" name="push_to_paperless" value="1" style="width: 2.5em; height: 1.25em;">
                                <label class="form-check-label" for="pushToPaperless">
                                    <span class="fw-bold text-dark d-block" style="font-size: 0.85rem;">Archive to Paperless-Ngx</span>
                                    <span class="text-secondary" style="font-size: 0.75rem;">Automatically map tags and push this file to the OCR server in the background.</span>
                                </label>
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer bg-light">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn text-white fw-bold px-4" style="background-color: #5c4df0;" id="btnSubmitDoc">
                            Upload File
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endpush

@push('scripts')
    <script>
        $(document).ready(function() {
            const docModal = new bootstrap.Modal(document.getElementById('docModal'));
            const $form = $('#docForm');

            // --- OPEN MODAL FOR CREATE ---
            $('#btnOpenDocModal').on('click', function() {
                $form[0].reset(); 
                $('#docId').val('');
                $('#docMethod').val('POST');
                
                $('#docModalTitle').text('Upload Document');
                $('#btnSubmitDoc').html('<i class="bi bi-cloud-upload me-2"></i>Upload File');
                $('#docFile').prop('required', true); 
                $('#fileHelpText').text('Max size: 10MB. Allowed: PDF, DOCX, PNG, JPG.');
                
                docModal.show();
            });

            // --- OPEN MODAL FOR EDIT ---
            $('.btn-edit-doc').on('click', function() {
                const data = $(this).data();
                
                $form[0].reset();
                $('#docId').val(data.id);
                $('#docMethod').val('PUT'); 
                
                $('#docType').val(data.type);
                $('#docEntity').val(data.entity);
                $('#docNotes').val(data.notes);
                
                $('#docModalTitle').text('Edit Document Info');
                $('#btnSubmitDoc').html('<i class="bi bi-save me-2"></i>Save Changes');
                $('#docFile').prop('required', false); // File is optional on edit
                $('#fileHelpText').html('Leave blank to keep existing file: <strong class="text-dark">' + data.filename + '</strong>');
                
                docModal.show();
            });

            // --- HANDLE FORM SUBMISSION ---
            $form.on('submit', function(e) {
                e.preventDefault();
                const $btn = $('#btnSubmitDoc');
                const originalText = $btn.html();
                
                $btn.html('<span class="spinner-border spinner-border-sm me-2"></span> Processing...');
                $btn.prop('disabled', true);

                let formData = new FormData(this);
                const isPaperless = formData.get('push_to_paperless') === '1';

                setTimeout(() => {
                    $btn.html(originalText).prop('disabled', false);
                    docModal.hide();
                    
                    if (isPaperless) {
                        alert('File saved locally and queued for Paperless-Ngx sync!');
                    } else {
                        alert('File metadata updated successfully!');
                    }
                }, 1000);
            });
        });
    </script>
@endpush