@php
    $breadcrumbs = [
        'My Documents' => url('/my_document_list')
    ];
@endphp
@extends('layouts.master')

@section('title')
    My Documents
@endsection

@section('style')
    <style>
        .division-card {
            border-radius: 12px;
            border: 1px solid #d1d9e6;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
            margin-bottom: 24px;
        }
        .division-card .card-header {
            background-color: #f8f9fa;
            border-bottom: 2px solid #343f52;
            font-weight: 700;
            font-size: 1.05rem;
            color: #343f52;
        }
        .empty-division {
            padding: 24px;
            text-align: center;
            color: #9aa2b1;
            font-size: 0.9rem;
        }
        .pair-row {
            cursor: pointer;
            transition: background-color .15s;
        }
        .pair-row:hover {
            background-color: #f3effb;
        }
        .pair-row.selected {
            background-color: #ede7fb !important;
        }
        .pair-row td { vertical-align: middle; }
    </style>
@endsection

@section('content')

<section class="wrapper bg-light">
    <div class="container py-14">

        <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
            <h5 class="display-1 mb-0" style="font-size:25px">My Documents</h5>
            <div class="d-flex gap-2">
                <a href="{{ url('/my_document_quick_add') }}" class="btn btn-sm btn-outline-dark rounded-pill">
                    <i class="uil uil-file-plus-alt"></i> สร้างใบใหม่ (Quotation + Invoice)
                </a>
                <a href="{{ url('/my_document_bulk_import') }}" class="btn btn-sm btn-outline-dark rounded-pill">
                    <i class="uil uil-scan"></i> Bulk Import (Scan Multiple)
                </a>
                <button type="button" class="btn btn-sm btn-violet rounded-pill" data-bs-toggle="modal" data-bs-target="#addDocumentModal">
                    <i class="uil uil-plus"></i> Add Document
                </button>
            </div>
        </div>
        

        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
        @endif
        @if (session('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
        @endif

        {{-- กราฟสรุปเอกสารตาม Division (Quotation + Invoice, เฉพาะ Completed)
             รวมถึงรายการเอกสารแยกตาม Division ด้านล่างกราฟ (การ์ดสไตล์เดิม) ซึ่งตอนนี้ย้ายมาแสดงผลรวมอยู่ใน
             React component นี้ทั้งหมดแล้ว เพื่อให้รายการด้านล่างกรอง/ไฮไลต์ตามปีการศึกษาและตาม Division ที่คลิกเลือกบนกราฟได้ --}}
        <div id="root-my-document-chart"></div>

    </div>
</section>

{{-- Modal: Add Document --}}
<div class="modal fade" id="addDocumentModal" tabindex="-1" aria-labelledby="addDocumentModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <form action="{{ url('/my_document_add') }}" method="POST" id="addDocumentForm">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title" id="addDocumentModalLabel">เพิ่มเอกสารเข้า Division</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">

                    <div class="mb-4">
                        <label class="form-label fw-bold text-dark">เลือก Division <span class="text-danger">*</span></label>
                        <select name="division_id" class="form-control" required>
                            <option value="">-- Select Division --</option>
                            @foreach ($divisions as $div)
                                <option value="{{ $div->division_id }}">{{ $div->division_name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <label class="form-label fw-bold text-dark">
                        เลือกชุดเอกสาร (Quotation + Invoice ที่ Completed แล้ว) <span class="text-danger">*</span>
                    </label>

                    <input type="hidden" name="quotation_id" id="selected_quotation_id" required>

                    @if ($availablePairs->isEmpty())
                        <div class="alert alert-warning mb-0">
                            ไม่พบชุดเอกสารที่พร้อมเพิ่ม (ต้องมีทั้ง Quotation และ Invoice ที่สถานะเป็น Completed และยังไม่เคยถูกเพิ่มมาก่อน)
                        </div>
                    @else
                        <div class="table-responsive" style="max-height: 320px; overflow-y: auto; border: 1px solid #edf2f7; border-radius: 8px;">
                            <table class="table table-sm table-hover mb-0">
                                <thead class="table-light" style="position: sticky; top: 0;">
                                    <tr>
                                        <th width="5%"></th>
                                        <th width="25%">Project Name</th>
                                        <th width="15%">Quotation No.</th>
                                        <th width="15%">Invoice No.</th>
                                        <th width="15%">Invoice Date</th>
                                        <th width="15%" class="text-end">Quotation Amount</th>
                                        <th width="15%" class="text-end">Invoice Amount</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($availablePairs as $pair)
                                        <tr class="pair-row" data-quotation-id="{{ $pair->quotation_id }}">
                                            <td class="text-center">
                                                <input type="checkbox" name="pair_radio" value="{{ $pair->quotation_id }}" class="form-check-input pair-radio">
                                            </td>
                                            <td>{{ $pair->quotation_project_name }}</td>
                                            <td>{{ $pair->quotation_no }}</td>
                                            <td>{{ $pair->invoice_no }}</td>
                                            <td>{{ $pair->invoice_date ? date('d F Y', strtotime($pair->invoice_date)) : '-' }}</td>
                                            <td class="text-end">{{ number_format((float) $pair->quotation_amount, 2) }}</td>
                                            <td class="text-end">{{ number_format((float) $pair->invoice_amount, 2) }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                                <tfoot>
                                    <tr class="table-light fw-bold">
                                        <td colspan="5" class="text-end">Total (ทั้งหมด):</td>
                                        <td class="text-end">{{ number_format($availablePairs->sum('quotation_amount'), 2) }}</td>
                                        <td class="text-end">{{ number_format($availablePairs->sum('invoice_amount'), 2) }}</td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    @endif

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm btn-secondary rounded-pill" data-bs-dismiss="modal">ยกเลิก</button>
                    <button type="submit" class="btn btn-sm btn-violet rounded-pill" {{ $availablePairs->isEmpty() ? 'disabled' : '' }}>
                        <i class="uil uil-plus me-1"></i> Add
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@section('script')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const rows = document.querySelectorAll('.pair-row');
    const hiddenInput = document.getElementById('selected_quotation_id');
    const form = document.getElementById('addDocumentForm');

    function clearSelection() {
        rows.forEach(function (r) {
            r.classList.remove('selected');
            r.querySelector('.pair-radio').checked = false;
        });
        hiddenInput.value = '';
    }

    function selectRow(row) {
        clearSelection();
        row.querySelector('.pair-radio').checked = true;
        row.classList.add('selected');
        hiddenInput.value = row.getAttribute('data-quotation-id');
    }

    rows.forEach(function (row) {
        const checkbox = row.querySelector('.pair-radio');
        const isCurrentlySelected = () => row.classList.contains('selected');

        row.addEventListener('click', function (e) {
            // ถ้าคลิกโดนตัว checkbox โดยตรง ให้ใช้ event ของ checkbox แทน (ป้องกันทำงานซ้ำ)
            if (e.target === checkbox) return;

            if (isCurrentlySelected()) {
                clearSelection();
            } else {
                selectRow(row);
            }
        });

        checkbox.addEventListener('click', function (e) {
            // ต้องหยุดไม่ให้ event ไปเด้งซ้ำที่ row click handler ด้านบน
            e.stopPropagation();

            if (checkbox.checked) {
                selectRow(row);
            } else {
                clearSelection();
            }
        });
    });

    form.addEventListener('submit', function (e) {
        if (!hiddenInput.value) {
            e.preventDefault();
            alert('กรุณาเลือกชุดเอกสาร (Quotation + Invoice) ก่อนกด Add');
        }
    });
});
</script>
@endsection