@extends('layouts.adminlte')

@section('title', 'Dokumen Proyek')
@section('page_title', 'Dokumen Proyek')

@push('styles')
    <link rel="stylesheet" href="{{ asset('vendor/datatables/css/dataTables.bootstrap5.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('vendor/datatables/css/responsive.bootstrap5.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('vendor/select2/css/select2.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('vendor/select2/css/select2-bootstrap-5-theme.min.css') }}" />
    <style>
        .select2-container--bootstrap-5 .select2-selection { min-height: 38px; }
        .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; }
    </style>
@endpush

@section('content')
    <div class="card mb-3">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="card-title m-0">Dokumen Proyek (Versioned)</h3>
            <button class="btn btn-success btn-sm" id="btnAdd">
                <i class="fas fa-plus me-1"></i>Upload Dokumen
            </button>
        </div>
        <div class="card-body">
            <div class="row g-2 align-items-end mb-2">
                <div class="col-md-4">
                    <label class="form-label">Project</label>
                    <select class="form-select" id="filterProject"></select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Status</label>
                    <select class="form-select" id="filterStatus">
                        <option value="">Semua</option>
                        <option value="draft">draft</option>
                        <option value="submitted">submitted</option>
                        <option value="approved">approved</option>
                        <option value="rejected">rejected</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">Cari</label>
                    <input type="text" class="form-control" id="filterQ" placeholder="judul/folder/type/file/doc_key">
                </div>
                <div class="col-md-3">
                    <button class="btn btn-primary w-100" id="btnReload">Tampilkan</button>
                </div>
            </div>

            <div class="table-responsive">
                <table class="table table-striped table-hover align-middle w-100" id="tbl">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>Project</th>
                        <th>Folder</th>
                        <th>Type</th>
                        <th>Title</th>
                        <th>Doc Key</th>
                        <th>Ver</th>
                        <th>Status</th>
                        <th>File</th>
                        <th>Aksi</th>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Upload Dokumen Proyek</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="form" enctype="multipart/form-data">
                    <div class="modal-body">
                        <input type="hidden" id="newVersionDocKey" value="">
                        <div class="row g-2">
                            <div class="col-md-6">
                                <label class="form-label">Project</label>
                                <select class="form-select" id="projectId" name="project_id" required></select>
                                <div class="small text-muted" id="projectLockHint" style="display:none;">New version akan mengikuti project dokumen sebelumnya.</div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Folder</label>
                                <input type="text" class="form-control" id="folder" name="folder" placeholder="Contract/WO, Shop Drawing, dll">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Doc Type</label>
                                <input type="text" class="form-control" id="docType" name="doc_type" placeholder="drawing, method_statement, dll">
                            </div>
                            <div class="col-md-8">
                                <label class="form-label">Title</label>
                                <input type="text" class="form-control" id="title" name="title" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Tags (comma)</label>
                                <input type="text" class="form-control" id="tags" name="tags" placeholder="asbuilt, revA, tender">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Status simpan</label>
                                <select class="form-select" id="postStatus" name="post_status">
                                    <option value="draft">draft</option>
                                    <option value="submitted">submitted (kirim untuk approve)</option>
                                </select>
                            </div>
                            <div class="col-12">
                                <label class="form-label">Notes</label>
                                <textarea class="form-control" id="notes" name="notes" rows="2"></textarea>
                            </div>
                            <div class="col-12">
                                <label class="form-label">File</label>
                                <input type="file" class="form-control" id="file" name="file" required>
                                <div class="small text-muted">Maks 20MB.</div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-success">Upload</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('vendor/datatables/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/dataTables.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/responsive.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('vendor/select2/js/select2.min.js') }}"></script>
    <script>
        $(function () {
            const csrfToken = document.querySelector('meta[name=\"csrf-token\"]')?.getAttribute('content');
            if (csrfToken) $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': csrfToken } });

            const badge = (txt, cls) => `<span class=\"badge text-bg-${cls}\">${txt}</span>`;
            const modal = new bootstrap.Modal(document.getElementById('modal'));

            const initProjectSelect = ($el, placeholder) => {
                if ($el.data('select2')) $el.select2('destroy');
                $el.select2({
                    theme: 'bootstrap-5',
                    width: '100%',
                    placeholder: placeholder || 'Cari project...',
                    allowClear: true,
                    ajax: {
                        url: `{{ route('field_execution.projects.search') }}`,
                        dataType: 'json',
                        delay: 250,
                        data: (params) => ({ q: params.term || '' }),
                        processResults: (data) => data,
                    }
                });
            };

            initProjectSelect($('#filterProject'), 'Semua project');

            const table = $('#tbl').DataTable({
                responsive: true,
                data: [],
                columns: [
                    { data: 'id' },
                    { data: 'project', render: (v) => v || '-' },
                    { data: 'folder', render: (v) => v || '-' },
                    { data: 'doc_type', render: (v) => v || '-' },
                    { data: 'title', render: (v) => v || '-' },
                    { data: 'doc_key', render: (v) => `<span class=\"mono\">${v || ''}</span>` },
                    { data: 'version', render: (v) => `v${Number(v||1)}` },
                    { data: 'status', render: (v) => badge(v || 'draft', v === 'approved' ? 'success' : (v === 'submitted' ? 'primary' : (v === 'rejected' ? 'danger' : 'secondary'))) },
                    { data: null, orderable: false, render: (r) => `<a href=\"${r.download_url}\" target=\"_blank\">${r.original_name || 'Download'}</a>` },
                    { data: null, orderable: false, render: (r) => {
                        const btnNewVer = `<button class=\"btn btn-sm btn-outline-dark btn-newver\" data-dockey=\"${r.doc_key}\">New Version</button>`;
                        if (r.status === 'draft' || r.status === 'rejected') {
                            return `<div class=\"d-flex gap-1 flex-wrap\">${btnNewVer}<button class=\"btn btn-sm btn-outline-primary btn-submit\" data-id=\"${r.id}\">Submit</button></div>`;
                        }
                        if (r.status === 'submitted') {
                            return `
                                <div class=\"d-flex gap-1 flex-wrap\">
                                    ${btnNewVer}
                                    <button class=\"btn btn-sm btn-outline-success btn-approve\" data-id=\"${r.id}\">Approve</button>
                                    <button class=\"btn btn-sm btn-outline-danger btn-reject\" data-id=\"${r.id}\">Reject</button>
                                </div>
                            `;
                        }
                        return btnNewVer;
                    }},
                ]
            });

            const load = () => {
                const params = new URLSearchParams();
                params.set('project_id', $('#filterProject').val() || '');
                params.set('status', $('#filterStatus').val() || '');
                params.set('q', $('#filterQ').val() || '');
                $.getJSON(`{{ route('field_execution.documents.data') }}?${params.toString()}`)
                    .done((resp) => table.clear().rows.add(resp.data || []).draw())
                    .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Load failed', 'error'));
            };

            $('#btnReload').on('click', load);
            $('#btnAdd').on('click', function () {
                $('#form')[0].reset();
                $('#newVersionDocKey').val('');
                $('#projectLockHint').hide();
                $('#projectId').prop('disabled', false);
                initProjectSelect($('#projectId'), 'Pilih project...');
                modal.show();
            });

            $('#tbl').on('click', '.btn-newver', function () {
                const docKey = $(this).data('dockey');
                $('#form')[0].reset();
                $('#newVersionDocKey').val(docKey);
                $('#projectLockHint').show();
                $('#projectId').prop('disabled', true);
                $('#projectId').html('<option value=\"\">(auto)</option>');
                modal.show();
            });

            $('#form').on('submit', function (e) {
                e.preventDefault();
                const fd = new FormData(this);
                const docKey = $('#newVersionDocKey').val();
                let url = `{{ route('field_execution.documents.store') }}`;
                if (docKey) url = `{{ url('/field-execution/documents') }}/${docKey}/new-version`;

                if (!docKey) {
                    fd.set('project_id', $('#projectId').val() || '');
                }

                $.ajax({
                    url,
                    type: 'POST',
                    data: fd,
                    processData: false,
                    contentType: false,
                }).done((resp) => {
                    modal.hide();
                    Swal.fire('OK', resp?.message || 'Saved', 'success');
                    load();
                }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Upload failed', 'error'));
            });

            $('#tbl').on('click', '.btn-submit', function () {
                const id = $(this).data('id');
                $.post(`{{ url('/field-execution/documents') }}/${id}/submit`)
                    .done(() => { load(); Swal.fire('OK', 'Submitted', 'success'); })
                    .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Failed', 'error'));
            });
            $('#tbl').on('click', '.btn-approve', function () {
                const id = $(this).data('id');
                $.post(`{{ url('/field-execution/documents') }}/${id}/approve`)
                    .done(() => { load(); Swal.fire('OK', 'Approved', 'success'); })
                    .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Failed', 'error'));
            });
            $('#tbl').on('click', '.btn-reject', function () {
                const id = $(this).data('id');
                Swal.fire({
                    title: 'Reject?',
                    input: 'text',
                    inputLabel: 'Alasan reject',
                    inputPlaceholder: 'Isi alasan...',
                    showCancelButton: true,
                    confirmButtonText: 'Reject',
                }).then((res) => {
                    if (!res.isConfirmed) return;
                    $.post(`{{ url('/field-execution/documents') }}/${id}/reject`, { reason: res.value || '' })
                        .done(() => { load(); Swal.fire('OK', 'Rejected', 'success'); })
                        .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Failed', 'error'));
                });
            });

            load();
        });
    </script>
@endpush