@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>
            <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>

        @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

        @forelse ($divisions as $div)
            @php
                $items = $myDocuments->get($div->division_id) ?? collect();
            @endphp
            <div class="card division-card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span><i class="uil uil-building me-1"></i> {{ $div->division_name }}
                        @if(!empty($div->division_shortname))
                            <span class="text-muted fw-normal">({{ $div->division_shortname }})</span>
                        @endif
                    </span>
                    <span class="badge bg-purple text-white">{{ $items->count() }} ชุด</span>
                </div>
                <div class="card-body p-0">
                    @if ($items->isEmpty())
                        <div class="empty-division">
                            <i class="uil uil-inbox" style="font-size: 1.8rem;"></i>
                            <p class="mb-0 mt-1">ยังไม่มีเอกสารในสังกัดนี้</p>
                        </div>
                    @else
                        <div class="table-responsive">
                            <table class="table table-striped table-condensed mb-0">
                                <thead>
                                    <tr>
                                        <th width="5%">No.</th>
                                        <th width="25%">Project Name</th>
                                        <th width="15%">Quotation No.</th>
                                        <th width="15%">Invoice No.</th>
                                        <th width="15%">Quotation Date</th>
                                        <th width="15%">Invoice Date</th>
                                        <th width="10%"></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($items as $key => $row)
                                        <tr>
                                            <td>{{ $key + 1 }}</td>
                                            <td>{{ $row->quotation_project_name }}</td>
                                            <td>{{ $row->quotation_no }}</td>
                                            <td>{{ $row->invoice_no }}</td>
                                            <td>{{ $row->quotation_date ? date('d F Y', strtotime($row->quotation_date)) : '-' }}</td>
                                            <td>{{ $row->invoice_date ? date('d F Y', strtotime($row->invoice_date)) : '-' }}</td>
                                            <td align="center">
                                                <a href="{{ url('/quotation_view', $row->my_document_quotation_id) }}" class="btn btn-circle btn-blue btn-sm" title="View Quotation">
                                                    <i class="uil uil-eye"></i>
                                                </a>
                                                <a href="{{ url('/invoice_view', $row->my_document_invoice_id) }}" class="btn btn-circle btn-yellow btn-sm" title="View Invoice">
                                                    <i class="uil uil-file"></i>
                                                </a>
                                                <a href="{{ url('/my_document_delete', $row->my_document_id) }}" class="btn btn-circle btn-danger btn-sm" title="Remove" onclick="return confirm('นำเอกสารชุดนี้ออกจาก Division ใช่หรือไม่?');">
                                                    <i class="uil uil-trash-alt"></i>
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @endif
                </div>
            </div>
        @empty
            <div class="text-center text-muted py-10">
                <i class="uil uil-inbox" style="font-size: 2.5rem;"></i>
                <p class="mt-2">ยังไม่มีข้อมูล Division ในระบบ กรุณาเพิ่ม Division ก่อน</p>
            </div>
        @endforelse

    </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="35%">Project Name</th>
                                        <th width="20%">Quotation No.</th>
                                        <th width="20%">Invoice No.</th>
                                        <th width="20%">Quotation Date</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($availablePairs as $pair)
                                        <tr class="pair-row" data-quotation-id="{{ $pair->quotation_id }}">
                                            <td class="text-center">
                                                <input type="radio" 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->quotation_date ? date('d F Y', strtotime($pair->quotation_date)) : '-' }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </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');

    rows.forEach(function (row) {
        row.addEventListener('click', function (e) {
            // ถ้าคลิกโดนตัว radio โดยตรง ให้ปล่อยพฤติกรรม default ไปเปลี่ยน checked เอง
            const radio = row.querySelector('.pair-radio');
            if (e.target !== radio) {
                radio.checked = true;
            }

            rows.forEach(function (r) { r.classList.remove('selected'); });
            row.classList.add('selected');
            hiddenInput.value = row.getAttribute('data-quotation-id');
        });
    });

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