@extends('layouts.app')
@php use App\Support\Menu; @endphp
@section('title', Menu::label($item))

@section('content')
<div class="card">
    <div class="card-header bg-white d-flex flex-wrap gap-2 align-items-center justify-content-between py-3">
        <h5 class="mb-0"><i class="bi {{ $item['icon'] }} text-primary"></i> {{ Menu::label($item) }}</h5>

        <div class="d-flex flex-wrap gap-2 align-items-end no-print">
            <div>
                <label class="form-label small mb-0">{{ __('ui.date_from') }}</label>
                <input type="date" id="dFrom" class="form-control form-control-sm">
            </div>
            <div>
                <label class="form-label small mb-0">{{ __('ui.date_to') }}</label>
                <input type="date" id="dTo" class="form-control form-control-sm">
            </div>
            <button id="btnFilter" class="btn btn-sm btn-outline-primary"><i class="bi bi-funnel"></i> {{ __('ui.filter') }}</button>
            <button id="btnReset" class="btn btn-sm btn-outline-secondary"><i class="bi bi-arrow-counterclockwise"></i> {{ __('ui.reset') }}</button>
            <button id="btnAdd" class="btn btn-sm btn-success"><i class="bi bi-plus-lg"></i> {{ __('ui.add_new') }}</button>
        </div>
    </div>

    <div class="card-body">
        <table id="tbl" class="table table-striped table-hover align-middle w-100"></table>
    </div>
</div>

{{-- Add / Edit modal --}}
<div class="modal fade" id="formModal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <form id="entryForm" class="modal-content" novalidate>
            <div class="modal-header">
                <h5 class="modal-title" id="formTitle"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="entryId">
                <div class="row g-3">
                    @foreach ($fields as $f)
                        <div class="{{ $f['type'] === 'textarea' ? 'col-12' : 'col-md-6' }}">
                            <label class="form-label" for="f_{{ $f['name'] }}">{{ $f['label'] }}@if($f['required']) <span class="text-danger">*</span>@endif</label>
                            @if ($f['type'] === 'textarea')
                                <textarea class="form-control" rows="2" id="f_{{ $f['name'] }}" name="{{ $f['name'] }}"></textarea>
                            @elseif ($f['type'] === 'select')
                                <select class="form-select" id="f_{{ $f['name'] }}" name="{{ $f['name'] }}">
                                    @foreach ($f['opts'] as $o)<option value="{{ $o['v'] }}">{{ $o['l'] }}</option>@endforeach
                                </select>
                            @else
                                <input class="form-control" id="f_{{ $f['name'] }}" name="{{ $f['name'] }}"
                                       type="{{ $f['type'] }}" @if($f['type']==='number') step="any" @endif>
                            @endif
                            <div class="invalid-feedback" data-err="{{ $f['name'] }}"></div>
                        </div>
                    @endforeach
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">{{ __('ui.cancel') }}</button>
                <button type="submit" class="btn btn-primary"><i class="bi bi-check2"></i> {{ __('ui.save') }}</button>
            </div>
        </form>
    </div>
</div>

{{-- View modal --}}
<div class="modal fade" id="viewModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ __('ui.details') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body"><dl class="row mb-0" id="viewBody"></dl></div>
            <div class="modal-footer"><button class="btn btn-light" data-bs-dismiss="modal">{{ __('ui.close') }}</button></div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
const URL_BASE = @json(url('/m/'.$item['slug']));
const TITLE    = @json(Menu::label($item));
const LOCALE   = @json(app()->getLocale());
const FIELDS   = @json($fields);
const ROWS     = @json($rows);
const OPT      = @json($opt);
const L = {
    actions: @json(__('ui.actions')), view: @json(__('ui.view')), edit: @json(__('ui.edit')), del: @json(__('ui.delete')),
    newRec: @json(__('ui.new_record')), editRec: @json(__('ui.edit_record')),
    confirm: @json(__('ui.confirm_delete')), confirmText: @json(__('ui.confirm_delete_text')),
    yes: @json(__('ui.yes_delete')), cancel: @json(__('ui.cancel')),
    excel: @json(__('ui.excel')), pdf: @json(__('ui.pdf')), print: @json(__('ui.print')), search: @json(__('ui.search')),
};
const esc = s => String(s ?? '').replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
const show = (f, v) => {
    if (v === null || v === undefined || v === '') return '';
    if (f.type === 'select') return (OPT[f.name] || {})[v] || v;
    if (f.type === 'number') return Number(v).toLocaleString(LOCALE === 'bn' ? 'bn-BD' : 'en-US', { maximumFractionDigits: 2 });
    return v;
};

/* ---------- columns: # | fields (no textarea, max 7) | Actions ---------- */
const shown = FIELDS.filter(f => f.type !== 'textarea').slice(0, 7);
const columns = [{ title: '#', data: null, orderable: false, searchable: false, className: 'text-center',
                   render: (d, t, r, m) => m.row + 1 }];
shown.forEach(f => columns.push({
    title: f.label, data: f.name, defaultContent: '',
    className: f.type === 'number' ? 'text-end' : '',
    render: (d, type) => type === 'display' ? esc(show(f, d)) : show(f, d),
}));
columns.push({
    title: L.actions, data: null, orderable: false, searchable: false, className: 'actions noexport text-center',
    render: (d, t, r) => `
      <div class="dropdown">
        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"
                data-bs-popper-config='{"strategy":"fixed"}'>${esc(L.actions)}</button>
        <ul class="dropdown-menu dropdown-menu-end">
          <li><a class="dropdown-item act-view" href="#" data-id="${r.id}"><i class="bi bi-eye text-info"></i> ${esc(L.view)}</a></li>
          <li><a class="dropdown-item act-edit" href="#" data-id="${r.id}"><i class="bi bi-pencil-square text-primary"></i> ${esc(L.edit)}</a></li>
          <li><a class="dropdown-item act-del"  href="#" data-id="${r.id}"><i class="bi bi-trash text-danger"></i> ${esc(L.del)}</a></li>
        </ul>
      </div>`,
});

const exp = { columns: ':not(.noexport)' };
const pdfPrint = $.fn.dataTable.ext.buttons;

const table = $('#tbl').DataTable({
    data: ROWS,
    columns,
    order: [],
    pageLength: 25,
    language: @json(__('ui.dt')),
    dom: "<'row mb-2 align-items-center'<'col-lg-6'B><'col-lg-6 text-lg-end'f>>rt<'row mt-2'<'col-md-5'i><'col-md-7'p>>",
    buttons: [
        { extend: 'excelHtml5', className: 'btn-sm btn-outline-success', text: '<i class="bi bi-file-earmark-excel"></i> ' + L.excel, title: TITLE, exportOptions: exp },
        { extend: 'pdfHtml5',   className: 'btn-sm btn-outline-danger',  text: '<i class="bi bi-file-earmark-pdf"></i> ' + L.pdf,     title: TITLE, exportOptions: exp,
          autoPrint: true,
          // pdfmake has no Bangla glyphs: in Bangla mode use the browser (Print -> Save as PDF) so text renders correctly
          action: function (e, dt, node, config) {
              (LOCALE === 'bn' ? pdfPrint.print : pdfPrint.pdfHtml5).action.call(this, e, dt, node, config);
          } },
        { extend: 'print',      className: 'btn-sm btn-outline-dark',    text: '<i class="bi bi-printer"></i> ' + L.print,            title: TITLE, exportOptions: exp },
    ],
    initComplete: function () {
        const f = $('#tbl_filter input'); f.attr('placeholder', L.search).addClass('form-control-sm');
        $('#tbl_filter label').contents().filter(function () { return this.nodeType === 3; }).remove();
    },
});

/* ---------- date to date filter ---------- */
$.fn.dataTable.ext.search.push(function (settings, data, idx) {
    if (settings.nTable.id !== 'tbl') return true;
    const from = $('#dFrom').val(), to = $('#dTo').val();
    if (!from && !to) return true;
    const d = settings.aoData[idx]._aData._date || '';
    if (from && d < from) return false;
    if (to && d > to) return false;
    return true;
});
$('#btnFilter').on('click', () => table.draw());
$('#btnReset').on('click', () => { $('#dFrom, #dTo').val(''); table.draw(); });

/* ---------- add / edit / view / delete ---------- */
const formModal = new bootstrap.Modal('#formModal'), viewModal = new bootstrap.Modal('#viewModal');
const rowById = id => ROWS.find(r => r.id == id);

function clearErrors() { $('#entryForm .is-invalid').removeClass('is-invalid'); $('#entryForm [data-err]').text(''); }

function openForm(row) {
    clearErrors();
    $('#entryForm')[0].reset();
    $('#entryId').val(row ? row.id : '');
    $('#formTitle').text(row ? L.editRec : L.newRec);
    FIELDS.forEach(f => {
        let v = row ? (row[f.name] ?? '') : '';
        if (!row && f.type === 'date') v = new Date().toISOString().slice(0, 10);
        $('#f_' + f.name).val(v);
    });
    formModal.show();
}

function openView(row) {
    $('#viewBody').html(FIELDS.map(f =>
        `<dt class="col-5 text-muted">${esc(f.label)}</dt><dd class="col-7">${esc(show(f, row[f.name])) || '-'}</dd>`).join(''));
    viewModal.show();
}

$('#btnAdd').on('click', () => openForm(null));

// one click on a row opens it for editing
$('#tbl tbody').on('click', 'tr', function (e) {
    if ($(e.target).closest('.actions, a, button').length) return;
    const r = table.row(this).data();
    if (r) openForm(r);
});
$('#tbl').on('click', '.act-view', function (e) { e.preventDefault(); openView(rowById($(this).data('id'))); });
$('#tbl').on('click', '.act-edit', function (e) { e.preventDefault(); openForm(rowById($(this).data('id'))); });
$('#tbl').on('click', '.act-del',  function (e) {
    e.preventDefault();
    const id = $(this).data('id');
    Swal.fire({ title: L.confirm, text: L.confirmText, icon: 'warning', showCancelButton: true,
                confirmButtonColor: '#dc3545', confirmButtonText: L.yes, cancelButtonText: L.cancel })
        .then(res => {
            if (!res.isConfirmed) return;
            $.ajax({ url: URL_BASE + '/' + id, type: 'DELETE' })
                .done(r => done(r.message))
                .fail(() => Swal.fire({ icon: 'error', title: 'Error' }));
        });
});

$('#entryForm').on('submit', function (e) {
    e.preventDefault();
    clearErrors();
    const id = $('#entryId').val();
    const fd = new FormData(this);
    if (id) fd.append('_method', 'PUT');
    $.ajax({ url: id ? URL_BASE + '/' + id : URL_BASE, type: 'POST', data: fd, processData: false, contentType: false })
        .done(r => done(r.message))
        .fail(xhr => {
            if (xhr.status === 422) {
                const errs = xhr.responseJSON.errors || {};
                Object.keys(errs).forEach(k => {
                    $('#f_' + k).addClass('is-invalid');
                    $('[data-err="' + k + '"]').text(errs[k][0]);
                });
            } else { Swal.fire({ icon: 'error', title: 'Error ' + xhr.status }); }
        });
});

function done(msg) {
    Swal.fire({ toast: true, position: 'top-end', icon: 'success', title: msg, showConfirmButton: false, timer: 1200 })
        .then(() => location.reload());
    setTimeout(() => location.reload(), 1300);
}
</script>
@endpush