@extends('layouts.admin')

@section('content')
    <style>
        body {
            background-color: #fff;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .breadcrumb-tabs {
            display: flex;
            gap: 2px;
            background-color: #f0f2f8;
            border-radius: 10px;
            overflow: hidden;
            margin: 40px 0 30px 0;
            box-shadow: 0 6px 14px rgba(0, 0, 0, 0.04);
        }

        .breadcrumb-tab {
            padding: 12px 20px;
            background: white;
            font-size: 14px;
            font-weight: 500;
            color: #4a4a4a;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all 0.2s ease-in-out;
            text-decoration: none;
            display: inline-block;
        }

        .breadcrumb-tab:hover {
            background-color: #f6f9ff;
        }

        .breadcrumb-tab.active {
            color: #2b2b2b;
            font-weight: 600;
            border-bottom: 2px solid #6366f1;
        }

        .folder-container {
            display: flex;
            flex-wrap: wrap;
            gap: 32px;
            padding: 10px 0;
        }

        .folder-card {
            width: 110px;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .folder-card:hover {
            transform: scale(1.06);
        }

        .folder-icon {
            width: 64px;
            margin-bottom: 10px;
        }

        .folder-label {
            font-size: 13px;
            font-weight: 600;
            color: #333;
        }

        .upload-form input[type="file"] {
            border: 1px solid #d1d5db;
            padding: 8px;
            border-radius: 6px;
        }

        .upload-form .btn {
            padding: 8px 16px;
        }

        .doc-card {
            padding: 12px;
            border-radius: 10px;
            border: 1p solid #e2e8f0;
            background-color: #fff;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
            transition: box-shadow 0.2s ease;
        }

        .doc-card:hover {
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
        }

        .doc-card img {
            width: 60px;
            margin: 0 auto 10px auto;
            display: block;
        }

        .doc-card small {
            display: block;
            font-size: 12px;
            text-align: center;
            color: #444;
            font-weight: 500;
        }

        .btn-reupload,
        .btn-verify {
            font-size: 13px;
            padding: 5px 10px;
        }

        .btn-submit-replacement {
            padding: 5px 12px;
            font-size: 13px;
        }
    </style>

    <div class="container">
        <!-- Breadcrumb -->
        <div class="breadcrumb-tabs" role="tablist">

            {{-- 🏠 Dashboard --}}
            <a href="{{ route('dashboard') }}" class="breadcrumb-tab">
                🏠 Dashboard
            </a>

            {{-- 📁 Company --}}
            <a href="{{ route('uploader.company.show', [$company]) }}" class="breadcrumb-tab">
                📁 {{ $company->name }}
            </a>

            {{-- 📂 Year --}}
            <a href="{{ route('uploader.year.show', [$company, $year]) }}" class="breadcrumb-tab">
                📂 {{ $year->display_year }}
            </a>

            {{-- 📅 Category --}}
            <a href="{{ route('uploader.category.show', [$company, $year, $category]) }}" class="breadcrumb-tab">
                📅 {{ $category->name }}
            </a>

            {{-- 📆 Month --}}
            <a href="{{ route('uploader.month.show', [$company, $year, $category, $month]) }}" class="breadcrumb-tab">
                📆 {{ $month->name }}
            </a>

            {{-- 🗂 Folder / Subcategory --}}
            <span class="breadcrumb-tab active">
@php
                    $subfolderName = $subfolder->name ?? 'Folder';
                @endphp

                @if (strtolower($category->name) == 'expenses')
                    💸 {{ $subfolderName }}
                @elseif(strtolower($category->name) == 'purchase')
                    🛒 {{ $subfolderName }}
                @else
                    🗂 {{ $subfolderName }}
                @endif
            </span>

        </div>

        @if (in_array(auth()->user()->role, ['operator']))
            <div class="upload-form mt-4">
                <small class="text-danger">(Max File Size 5 MB)</small>
                <form method="POST" enctype="multipart/form-data" class="d-flex flex-wrap align-items-center gap-3"
                    id="upload-form">
                    @csrf
                    <input type="file" name="document" class="form-control w-50" required id="upload-file-input"
                        accept=".pdf,.jpg,.jpeg,.png">
                    <button type="submit" class="btn btn-primary">📤 Upload Document</button>
                </form>
            </div>
        @endif

        <h5 class="mt-3">📁 Uploaded Documents</h5>
        @if (isset($documents) && $documents->count() > 0)
            @php
                $categoryName = strtolower($category->name ?? '');
            @endphp
            <div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 g-3 doc-grid">
                @foreach ($documents as $doc)
@php
                        $show_doc = false;
                        $status = $doc->status_of_audit ?? $doc->status ?? 'pending';

                        if (auth()->user()->role == 'admin') {
                            $show_doc = true;
                        } elseif (auth()->user()->role == 'accounts') {
                            $show_doc = in_array($status, ['pending', 'reupload']);
                        } elseif (auth()->user()->role == 'operator') {
                            $show_doc = $status == 'pending';
                        } elseif (auth()->user()->role == 'ca') {
                            $show_doc = ($status == 'approved' || $status == 'audited');
                        }
                    @endphp

                    @if ($show_doc)
@php
                            // File path from DB
                            $filePath = $doc->bill_path ?? $doc->file_path ?? null;
                            $fname = $filePath ? basename($filePath) : 'No File';
                            $status = $doc->status_of_audit ?? $doc->status ?? 'pending';
                            $fileUrl = $filePath ? asset($filePath) : '#';
                        @endphp

                        <div class="col">
                            <div class="doc-card h-100 d-flex flex-column justify-content-between">

                                {{-- 🔗 FILE LINK --}}
                                @if (auth()->user()->role == 'admin' && $status == 'pending')
                                    <a href="#" onclick="showAuditAlert()"
                                        class="text-decoration-none text-dark d-block">
                                    @else
                                        <a href="{{ $fileUrl }}" target="_blank"
                                            class="text-decoration-none text-dark d-block">
                                @endif

                                <img src="{{ asset('images/document.png') }}" class="img-fluid">

                                <small>{{ $fname }}</small>

                                <small class="text-muted">
                                    ({{ strtolower(pathinfo($fname, PATHINFO_EXTENSION)) }})
                                </small>



                                </a>

                                {{-- 🔁 ACCOUNTS ACTION --}}
                                @php
                                    $isExpense = isset($doc->sub_category_id);
                                    $auditRoute = $isExpense ? 'uploader.audit_expense' : 'uploader.audit_purchase';
                                @endphp
                                @if (auth()->user()->role == 'accounts' && in_array($status, ['pending', 'reupload']))
                                    <form method="POST" action="{{ route($auditRoute, $doc->id) }}" enctype="multipart/form-data" class="mt-2 audit-form" data-doc-type="{{ $isExpense ? 'expense' : 'purchase' }}">
                                        @csrf
                                        <input type="file" name="replacement_file" class="form-control form-control-sm mb-1 replacement-file" style="display: none;">
                                        <div class="d-flex flex-wrap gap-2 justify-content-center">
                                            <button type="button" class="btn btn-sm btn-outline-warning btn-reupload">
                                                🔁 Reupload
                                            </button>
                                            <button type="button" class="btn btn-sm btn-success btn-verify" data-action="audit">
                                                ✅ Verify
                                            </button>
                                        </div>
                                    </form>
                                @else
                                    <div class="text-muted small mt-2">
                                        Status: {{ ucfirst($status) }}
                                    </div>
                                @endif

                                {{-- 📦 MOVE --}}
                                @if (in_array(auth()->user()->role, ['admin', 'accounts']))
                                    <button class="btn btn-sm btn-secondary mt-2 btn-move-doc"
                                        data-doc-id="{{ $doc->id }}">
                                        📦 Move
                                    </button>
                                @endif

                            </div>
                        </div>
                    @endif
                @endforeach
            </div>
        @else
            <p class="text-muted">No documents uploaded yet.</p>
        @endif
    </div>

    <!-- Move Modal -->
    <div class="modal fade" id="moveDocModal" tabindex="-1" aria-labelledby="moveDocLabel" aria-hidden="true">
        <div class="modal-dialog">
            <form method="POST" action="{{ route('uploader.move_purchase_document') }}" id="move-form">
                @csrf
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="moveDocLabel">Move Document</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" name="document_id" id="move-doc-id">
                        <div class="mb-3">
                            <label class="form-label">Select Month</label>
                            <select id="month-select" name="target_month_id" class="form-select" required>
                                <option value="">-- Select Month --</option>
                                @foreach ($all_months as $m)
                                    <option value="{{ $m->id }}">{{ $m->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Select Company Subfolder</label>
                            <select name="target_folder_id" id="subfolder-select" class="form-select" required disabled>
                                <option value="">-- Select Subfolder --</option>
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">📦 Move</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        // Subfolders JSON from PHP
        const subfoldersByMonth = {!! json_encode($subfolders_by_month) !!};

        // Alert for unaudited docs (admin/viewers)
        function showAuditAlert() {
            Swal.fire({
                icon: 'info',
                title: 'Not Audited Yet',
                text: 'The file is not audited yet. Please wait for the Auditor department to review it.',
                confirmButtonText: 'Okay'
            });
        }

        // AJAX form submit function
        function submitFormAjax(form, action = null) {
            const formData = new FormData(form);

            if(action){
                formData.append('action', action);
            } else {
                const btnAction = form.querySelector('button[name="action"]');
                if(btnAction){
                    formData.append('action', btnAction.value);
                }
            }

            Swal.fire({
                title: 'Processing...',
                text: 'Please wait...',
                didOpen: () => Swal.showLoading(),
                allowOutsideClick: false,
                allowEscapeKey: false
            });

            fetch(form.action, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            })
            .then(res => res.json())
            .then(data => {
                if(data.success){
                    Swal.fire('Success!', data.message, 'success').then(() => location.reload());
                } else {
                    Swal.fire('Error!', data.message || 'Something went wrong', 'error');
                }
            })
            .catch(err => {
                Swal.fire('Error!', 'Network error, please try again', 'error');
            });
        }

        document.addEventListener("DOMContentLoaded", function() {
            // Toggle Reupload input
            document.querySelectorAll('.btn-reupload').forEach(button => {
                button.addEventListener('click', function() {
                    const input = this.closest('form').querySelector('.replacement-file');
                    input.style.display = input.style.display === 'none' ? 'block' : 'none';
                    if (input.style.display === 'block') input.focus();
                });
            });

            // Auto-submit on Reupload file selection
            document.querySelectorAll('.replacement-file').forEach(input => {
                input.addEventListener('change', function() {
                    if(this.files.length > 0){
                        submitFormAjax(this.closest('form'), 'reupload');
                    }
                });
            });

            // Verify button click - FIXED with data-action
            document.querySelectorAll('.btn-verify').forEach(button => {
                button.addEventListener('click', function(e){
                    e.preventDefault();
                    const form = this.closest('.audit-form');
                    const action = this.getAttribute('data-action') || 'audit';
                    submitFormAjax(form, action);
                });
            });

            // Move buttons
            document.querySelectorAll('.btn-move-doc').forEach(button => {
                button.addEventListener('click', function() {
                    const docId = this.getAttribute('data-doc-id');
                    document.getElementById('move-doc-id').value = docId;
                    document.getElementById('month-select').value = '';
                    const subfolderSelect = document.getElementById('subfolder-select');
                    subfolderSelect.innerHTML = '<option value="">-- Select Subfolder --</option>';
                    subfolderSelect.disabled = true;
                    new bootstrap.Modal(document.getElementById('moveDocModal')).show();
                });
            });

            // Move form AJAX
            document.getElementById('move-form')?.addEventListener('submit', function(e) {
                e.preventDefault();
                const formData = new FormData(this);
                Swal.fire({
                    title: 'Moving Document...',
                    text: 'Please wait...',
                    didOpen: () => Swal.showLoading(),
                    allowOutsideClick: false,
                    allowEscapeKey: false
                });
                fetch(this.action, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    }
                })
                .then(res => res.json())
                .then(data => {
                    if (data.success) {
                        Swal.fire('Success!', data.message || 'Document moved successfully!', 'success').then(() => location.reload());
                    } else {
                        Swal.fire('Error!', data.message || 'Move failed', 'error');
                    }
                })
                .catch(err => {
                    Swal.fire('Error!', 'Network error, please try again', 'error');
                });
            });

            // Subfolder populate
            document.getElementById('month-select')?.addEventListener('change', function() {
                const selectedMonthId = this.value;
                const subfolderSelect = document.getElementById('subfolder-select');
                subfolderSelect.innerHTML = '<option value="">-- Select Subfolder --</option>';
                subfolderSelect.disabled = true;
                if (subfoldersByMonth[selectedMonthId]) {
                    subfoldersByMonth[selectedMonthId].forEach(folder => {
                        const option = document.createElement('option');
                        option.value = folder.id;
                        option.textContent = folder.name;
                        subfolderSelect.appendChild(option);
                    });
                    subfolderSelect.disabled = false;
                }
            });

            // Upload validation
            const uploadFileInput = document.getElementById('upload-file-input');
            if (uploadFileInput) {
                uploadFileInput.addEventListener('change', function() {
                    const file = this.files[0];
                    if (file && file.size > 5 * 1024 * 1024) {
                        Swal.fire('File Too Large', 'Please upload a file smaller than 5 MB.', 'error');
                        this.value = '';
                    }
                });
            }
        });
    </script>
@endsection