@extends('layouts.adminlte')

@section('title', 'Site Report (Daily Report)')
@section('page_title', 'Site Report (Daily Report)')

@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">Site Report (Daily Report)</h3>
            <button class="btn btn-success btn-sm" id="btnAdd">
                <i class="fas fa-plus me-1"></i>Tambah Report
            </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">Dari</label>
                    <input type="date" class="form-control" id="filterFrom" value="{{ now()->startOfMonth()->toDateString() }}">
                </div>
                <div class="col-md-2">
                    <label class="form-label">Sampai</label>
                    <input type="date" class="form-control" id="filterTo" value="{{ now()->toDateString() }}">
                </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-2">
                    <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>Tanggal</th>
                        <th>Project</th>
                        <th>Cuaca</th>
                        <th>Manpower</th>
                        <th>Actual %</th>
                        <th>Status</th>
                        <th>Attachments</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">Tambah Site Report</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">
                        <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>
                            <div class="col-md-3">
                                <label class="form-label">Tanggal</label>
                                <input type="date" class="form-control" id="reportDate" name="report_date" value="{{ now()->toDateString() }}" required>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Cuaca</label>
                                <input type="text" class="form-control" id="weather" name="weather" placeholder="cerah/hujan/dll">
                            </div>

                            <div class="col-md-3">
                                <label class="form-label">Manpower (orang)</label>
                                <input type="number" min="0" class="form-control" id="manpower" name="manpower_count">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Actual Progress (%)</label>
                                <input type="number" min="0" max="100" step="0.001" class="form-control" id="actual" name="progress_actual_percent" value="0">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Peralatan</label>
                                <input type="text" class="form-control" id="equipment" name="equipment" placeholder="Excavator, Scaffolding, dll">
                            </div>

                            <div class="col-12">
                                <label class="form-label">Catatan Progress</label>
                                <textarea class="form-control" id="progressNote" name="progress_note" rows="2"></textarea>
                            </div>
                            <div class="col-12">
                                <label class="form-label">Kendala / Issue</label>
                                <textarea class="form-control" id="issues" name="issues" rows="2"></textarea>
                            </div>
                            <div class="col-12">
                                <label class="form-label">Constraint (material/alat/cuaca/perizinan)</label>
                                <textarea class="form-control" id="constraints" name="constraints" rows="2"></textarea>
                            </div>
                            <div class="col-12">
                                <label class="form-label">Lampiran (foto/dokumen)</label>
                                <input type="file" class="form-control" id="attachments" name="attachments[]" multiple>
                                <div class="small text-muted">Maks 10MB per file.</div>
                            </div>
                            <div class="col-12">
                                <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>
                    </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">Simpan</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 fmtSize = (b) => {
                const n = Number(b||0);
                if (n < 1024) return `${n} B`;
                if (n < 1024*1024) return `${(n/1024).toFixed(1)} KB`;
                return `${(n/(1024*1024)).toFixed(1)} MB`;
            };

            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 modal = new bootstrap.Modal(document.getElementById('modal'));

            const table = $('#tbl').DataTable({
                responsive: true,
                data: [],
                columns: [
                    { data: 'id' },
                    { data: 'report_date' },
                    { data: 'project', render: (v) => v || '-' },
                    { data: 'weather', render: (v) => v || '-' },
                    { data: 'manpower_count', render: (v) => (v===null||v===undefined)?'-':v },
                    { data: 'progress_actual_percent', render: (v) => `${Number(v||0).toFixed(3)}%` },
                    { data: 'status', render: (v) => badge(v || 'draft', v === 'approved' ? 'success' : (v === 'submitted' ? 'primary' : (v === 'rejected' ? 'danger' : 'secondary'))) },
                    { data: 'attachments', orderable: false, render: (arr) => {
                        const a = arr || [];
                        if (!a.length) return '-';
                        return a.map(x => `<a href=\"${x.download_url}\" target=\"_blank\">${x.name}</a> <span class=\"text-muted\">(${fmtSize(x.size_bytes)})</span>`).join('<br>');
                    }},
                    { data: null, orderable: false, render: (r) => {
                        if (r.status === 'draft' || r.status === 'rejected') {
                            return `<button class=\"btn btn-sm btn-outline-primary btn-submit\" data-id=\"${r.id}\">Submit</button>`;
                        }
                        if (r.status === 'submitted') {
                            return `
                                <div class=\"d-flex gap-1\">
                                    <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 '-';
                    }},
                ]
            });

            const load = () => {
                const params = new URLSearchParams();
                params.set('project_id', $('#filterProject').val() || '');
                params.set('date_from', $('#filterFrom').val() || '');
                params.set('date_to', $('#filterTo').val() || '');
                params.set('status', $('#filterStatus').val() || '');
                $.getJSON(`{{ route('field_execution.site_reports.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();
                initProjectSelect($('#projectId'), 'Pilih project...');
                modal.show();
            });

            $('#form').on('submit', function (e) {
                e.preventDefault();
                const fd = new FormData(this);
                fd.set('project_id', $('#projectId').val() || '');
                $.ajax({
                    url: `{{ route('field_execution.site_reports.store') }}`,
                    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 || 'Save failed', 'error'));
            });

            $('#tbl').on('click', '.btn-submit', function () {
                const id = $(this).data('id');
                $.post(`{{ url('/field-execution/site-reports') }}/${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/site-reports') }}/${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/site-reports') }}/${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