@extends('layouts.master')

@section('title', 'Merek Barang')

@section('styles')
<link rel="stylesheet" href="{{ asset('build/assets/libs/flatpickr/flatpickr.min.css') }}">
<style>
    #tblMerek_wrapper .dataTables_filter input {
        border-color: #c8c8c8 !important;
        border-radius: 6px;
        padding: 4px 10px;
    }
    #tblMerek_wrapper .dataTables_filter input:focus {
        border-color: #a15adf !important;
        box-shadow: 0 0 0 0.18rem rgba(161,90,223,.15) !important;
    }
    #tblMerek_wrapper .dataTables_length select {
        border-color: #c8c8c8 !important;
        border-radius: 6px;
        padding: 4px 8px;
        min-width: 70px;
    }
    #tblMerek_wrapper .dataTables_filter label,
    #tblMerek_wrapper .dataTables_length label {
        font-size: .875rem;
        color: #6c757d;
    }
    #tblMerek_wrapper .dataTables_info {
        font-size: .8rem;
        color: #6c757d;
    }
    #tblMerek td.aksi-col { white-space: nowrap; }
</style>
@endsection

@section('content')
<div class="container-fluid">

    <div class="d-md-flex d-block align-items-center justify-content-between my-4 page-header-breadcrumb">
        <div>
            <p class="fw-semibold fs-18 mb-0">Merek Barang</p>
            <span class="fs-13 text-muted">Data Induk &rarr; Merek Barang</span>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card custom-card">
                <div class="card-header d-flex align-items-center justify-content-between flex-wrap gap-2">
                    <div class="card-title mb-0">Daftar Merek Barang</div>
                    <div class="d-flex gap-2 flex-wrap">
                        @can('merek_barang.view')
                        <a href="{{ route('data-induk.merek-barang.export-excel') }}" class="btn btn-success btn-sm">
                            <i class="bx bx-download me-1"></i> Unduh Excel
                        </a>
                        @endcan
                        @can('merek_barang.create')
                        <button type="button" class="btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#modalImport">
                            <i class="bx bx-upload me-1"></i> Import
                        </button>
                        <button type="button" class="btn btn-primary btn-sm" onclick="openTambah()">
                            <i class="bx bx-plus me-1"></i> Tambah Merek
                        </button>
                        @endcan
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="tblMerek" class="table table-hover table-bordered align-middle mb-0" style="width:100%">
                            <thead>
                                <tr>
                                    <th class="text-center" style="width:45px">No</th>
                                    <th class="text-center" style="width:120px">Aksi</th>
                                    <th>Nama Merek</th>
                                    <th class="text-center" style="width:90px">Status</th>
                                    <th class="text-center" style="width:80px">Jenis NIE</th>
                                    <th>Nomor NIE</th>
                                    <th class="text-center" style="width:120px">Masa Berlaku NIE</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

{{-- Modal Tambah / Edit --}}
<div class="modal fade" id="modalForm" tabindex="-1" data-bs-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="modalFormTitle">Tambah Merek</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="formId">

                <div class="mb-3">
                    <label class="form-label fw-semibold">Nama Merek <span class="text-danger">*</span></label>
                    <input type="text" id="formNama" class="form-control text-uppercase" maxlength="255" placeholder="Nama merek" style="text-transform:uppercase">
                    <div class="invalid-feedback" id="errNama"></div>
                </div>

                <div class="mb-1">
                    <hr class="my-1">
                    <p class="fw-semibold mb-2" style="font-size:.8rem;color:#6c757d;text-transform:uppercase;letter-spacing:.05em">Nomor Ijin Edar (NIE)</p>
                    <div class="row g-3">
                        <div class="col-md-3">
                            <label class="form-label fw-semibold">Jenis NIE</label>
                            <select id="formJenisNie" class="form-select">
                                <option value="">-- Pilih --</option>
                                <option value="AKL">AKL</option>
                                <option value="AKD">AKD</option>
                            </select>
                        </div>
                        <div class="col-md-9">
                            <label class="form-label fw-semibold">No. NIE</label>
                            <input type="text" id="formNoNie" class="form-control" maxlength="100" placeholder="Nomor izin edar">
                        </div>
                        <div class="col-12">
                            <label class="form-label fw-semibold">Masa Aktif NIE</label>
                            <input type="text" id="formMasaAktifNie" class="form-control flatpickr-nie" placeholder="dd-mm-yyyy" autocomplete="off">
                        </div>
                    </div>
                </div>

                <div class="mt-3">
                    <label class="form-label fw-semibold">Catatan</label>
                    <textarea id="formCatatan" class="form-control" rows="2" placeholder="Opsional"></textarea>
                    <div class="invalid-feedback" id="errCatatan"></div>
                </div>

                <div id="editWarning" class="alert alert-warning d-flex align-items-start gap-2 mt-3 mb-0 py-2 d-none" style="font-size:.85rem">
                    <i class="bx bx-info-circle fs-16 mt-1 flex-shrink-0"></i>
                    <span></span>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light btn-sm" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-primary btn-sm" onclick="simpan()">
                    <i class="bx bx-save me-1"></i> Simpan
                </button>
            </div>
        </div>
    </div>
</div>

{{-- Modal Lihat --}}
<div class="modal fade" id="modalLihat" tabindex="-1" data-bs-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title">Detail Merek</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <table class="table table-sm table-borderless mb-0">
                    <tr><td class="text-muted" width="130">Nama Merek</td><td id="vNama"></td></tr>
                    <tr><td class="text-muted">Status</td><td id="vStatus"></td></tr>
                    <tr><td class="text-muted">Catatan</td><td id="vCatatan"></td></tr>
                    <tr><td colspan="2"><hr class="my-1"><small class="text-muted fw-semibold text-uppercase" style="letter-spacing:.05em">Nomor Ijin Edar (NIE)</small></td></tr>
                    <tr><td class="text-muted">Jenis NIE</td><td id="vJenisNie"></td></tr>
                    <tr><td class="text-muted">No. NIE</td><td id="vNoNie"></td></tr>
                    <tr><td class="text-muted">Masa Aktif NIE</td><td id="vMasaAktifNie"></td></tr>
                </table>
                <hr class="my-2">
                <div class="row text-muted" style="font-size:0.8rem">
                    <div class="col-6">
                        <i class="bx bx-user-plus me-1"></i>Dibuat oleh: <span id="vAuditCreatedBy">—</span><br>
                        <span id="vAuditCreatedAt" class="ms-3"></span>
                    </div>
                    <div class="col-6">
                        <i class="bx bx-edit me-1"></i>Diubah oleh: <span id="vAuditUpdatedBy">—</span><br>
                        <span id="vAuditUpdatedAt" class="ms-3"></span>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light btn-sm" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>
@include('data-induk._modal-import', [
    'label'         => 'Merek Barang',
    'importRoute'   => 'data-induk.merek-barang.import',
    'templateRoute' => 'data-induk.merek-barang.template-excel',
])
@endsection

@push('scripts')
<script src="{{ asset('build/assets/libs/flatpickr/flatpickr.min.js') }}"></script>
<script>
const URL_DATA   = '{{ route("data-induk.merek-barang.data") }}';
const URL_STORE  = '{{ route("data-induk.merek-barang.store") }}';
const URL_BASE   = '{{ url("data-induk/merek-barang") }}';
const CSRF       = '{{ csrf_token() }}';
@include('data-induk._import-js')
const CAN_EDIT   = {{ Auth::guard('internal')->user()->can('merek_barang.edit')   ? 'true' : 'false' }};
const CAN_DELETE = {{ Auth::guard('internal')->user()->can('merek_barang.delete') ? 'true' : 'false' }};

let dt, fpNie;

$(function () {
    fpNie = flatpickr('#formMasaAktifNie', { dateFormat: 'd-m-Y', allowInput: true });

    dt = $('#tblMerek').DataTable({
        ajax: { url: URL_DATA, dataSrc: 'data' },
        columns: [
            { data: null, orderable: false, searchable: false, className: 'text-center' },
            {
                data: null, orderable: false, searchable: false, className: 'text-center aksi-col',
                render: function (data, type, row) {
                    let btns = `<button class="btn btn-info btn-sm px-2 py-1 me-1" title="Lihat" onclick="openLihat(${row.id})"><i class="bx bx-show fs-14"></i></button>`;
                    if (CAN_EDIT) {
                        const toggleIcon  = row.is_active ? 'bx-toggle-right' : 'bx-toggle-left';
                        const toggleClass = row.is_active ? 'btn-success' : 'btn-danger';
                        const toggleTitle = row.is_active ? 'Nonaktifkan' : 'Aktifkan';
                        btns += `<button class="btn ${toggleClass} btn-sm px-2 py-1 me-1" title="${toggleTitle}" onclick="toggleStatus(${row.id})"><i class="bx ${toggleIcon} fs-14"></i></button>`;
                        btns += `<button class="btn btn-warning btn-sm px-2 py-1 me-1" title="Edit" onclick="openEdit(${row.id})"><i class="bx bx-pencil fs-14"></i></button>`;
                    }
                    if (CAN_DELETE) btns += `<button class="btn btn-danger btn-sm px-2 py-1" title="Hapus" onclick="hapus(${row.id})"><i class="bx bx-trash fs-14"></i></button>`;
                    return btns;
                }
            },
            { data: 'nama' },
            {
                data: 'is_active', className: 'text-center',
                render: function (val) {
                    return val
                        ? '<span class="badge bg-success-transparent text-success">Aktif</span>'
                        : '<span class="badge bg-danger-transparent text-danger">Nonaktif</span>';
                }
            },
            { data: 'jenis_nie', className: 'text-center', defaultContent: '-' },
            { data: 'no_nie', defaultContent: '-' },
            {
                data: 'masa_aktif_nie', className: 'text-center', defaultContent: '-',
                render: function (val) {
                    if (!val) return '-';
                    const d = new Date(val);
                    if (isNaN(d)) return val;
                    const dd = String(d.getUTCDate()).padStart(2,'0');
                    const mm = String(d.getUTCMonth()+1).padStart(2,'0');
                    const yyyy = d.getUTCFullYear();
                    return dd + '-' + mm + '-' + yyyy;
                }
            },
        ],
        drawCallback: function () {
            const api   = this.api();
            const start = api.page.info().start;
            api.rows({ page: 'current', order: 'applied' }).nodes().each(function (row, i) {
                $('td:first-child', row).html(start + i + 1);
            });
        },
        language: { url: '//cdn.datatables.net/plug-ins/1.12.1/i18n/id.json' },
        pageLength: 25,
        order: [[2, 'asc']],
    });
});

function clearErrors() {
    ['Nama','Catatan'].forEach(f => {
        $('#form'+f).removeClass('is-invalid');
        $('#err'+f).text('');
    });
}

function showErrors(errors) {
    if (errors.nama)    { $('#formNama').addClass('is-invalid');    $('#errNama').text(errors.nama[0]); }
    if (errors.catatan) { $('#formCatatan').addClass('is-invalid'); $('#errCatatan').text(errors.catatan[0]); }
}

function resetNieFields() {
    $('#formJenisNie').val('');
    $('#formNoNie').val('');
    if (fpNie) fpNie.clear();
}

function openTambah() {
    clearErrors();
    $('#formId').val('');
    $('#modalFormTitle').text('Tambah Merek');
    $('#formNama').val('');
    $('#formCatatan').val('');
    resetNieFields();
    $('#editWarning').addClass('d-none');
    new bootstrap.Modal('#modalForm').show();
}

function openEdit(id) {
    clearErrors();
    $.get(URL_BASE + '/' + id, function (res) {
        const d = res.data;
        $('#formId').val(d.id);
        $('#modalFormTitle').text('Edit Merek');
        $('#formNama').val(d.nama);
        $('#formCatatan').val(d.catatan ?? '');
        $('#formJenisNie').val(d.jenis_nie ?? '');
        $('#formNoNie').val(d.no_nie ?? '');
        if (fpNie) fpNie.setDate(d.masa_aktif_nie ? d.masa_aktif_nie.split('-').reverse().join('-') : null);

        $.get(URL_BASE + '/' + id + '/usage-count', function (u) {
            if (u.count > 0) {
                $('#editWarning span').text(`Merek ini digunakan oleh ${u.count} barang. Perubahan nama akan berlaku otomatis untuk semua barang tersebut.`);
                $('#editWarning').removeClass('d-none');
            } else {
                $('#editWarning').addClass('d-none');
            }
        });

        new bootstrap.Modal('#modalForm').show();
    });
}

function openLihat(id) {
    $.get(URL_BASE + '/' + id, function (res) {
        const d = res.data;
        $('#vNama').text(d.nama);
        $('#vStatus').html(d.is_active
            ? '<span class="badge bg-success-transparent text-success">Aktif</span>'
            : '<span class="badge bg-danger-transparent text-danger">Nonaktif</span>');
        $('#vCatatan').text(d.catatan ?? '-');
        $('#vJenisNie').text(d.jenis_nie ?? '-');
        $('#vNoNie').text(d.no_nie ?? '-');
        $('#vMasaAktifNie').text(d.masa_aktif_nie ?? '-');
        $('#vAuditCreatedBy').text(d.audit_created_by ?? '—');
        $('#vAuditCreatedAt').text(d.audit_created_at ?? '');
        $('#vAuditUpdatedBy').text(d.audit_updated_by ?? '—');
        $('#vAuditUpdatedAt').text(d.audit_updated_at ?? '');
        new bootstrap.Modal('#modalLihat').show();
    });
}

function simpan() {
    clearErrors();
    const id     = $('#formId').val();
    const isEdit = !!id;
    const url    = isEdit ? URL_BASE + '/' + id : URL_STORE;
    const method = isEdit ? 'PUT' : 'POST';

    $.ajax({
        url, method,
        headers: { 'X-CSRF-TOKEN': CSRF },
        data: {
            nama:            $('#formNama').val().toUpperCase(),
            catatan:         $('#formCatatan').val(),
            jenis_nie:       $('#formJenisNie').val() || null,
            no_nie:          $('#formNoNie').val() || null,
            masa_aktif_nie:  fpNie?.selectedDates[0] ? fpNie.formatDate(fpNie.selectedDates[0], 'Y-m-d') : null,
        },
        success: function (res) {
            if (res.success) {
                bootstrap.Modal.getInstance('#modalForm').hide();
                dt.ajax.reload(null, false);
                Swal.fire({ icon: 'success', title: 'Berhasil', text: res.message, timer: 1800, showConfirmButton: false });
            }
        },
        error: function (xhr) {
            if (xhr.status === 422) showErrors(xhr.responseJSON.errors);
        }
    });
}

function toggleStatus(id) {
    $.ajax({
        url: URL_BASE + '/' + id + '/toggle-status',
        method: 'PATCH',
        headers: { 'X-CSRF-TOKEN': CSRF },
        success: function (res) {
            if (res.success) {
                dt.ajax.reload(null, false);
                Swal.fire({ icon: 'success', title: 'Berhasil', text: res.message, timer: 1500, showConfirmButton: false });
            }
        }
    });
}

function hapus(id) {
    $.get(URL_BASE + '/' + id + '/usage-count', function (u) {
        if (u.count > 0) {
            Swal.fire({ icon: 'error', title: 'Tidak Dapat Dihapus', text: `Merek ini digunakan oleh ${u.count} barang.` });
            return;
        }
        Swal.fire({
            title: 'Hapus merek ini?',
            text: 'Data yang sudah dihapus tidak bisa dikembalikan.',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Ya, Hapus',
            cancelButtonText: 'Batal',
        }).then(result => {
            if (!result.isConfirmed) return;
            $.ajax({
                url: URL_BASE + '/' + id,
                method: 'DELETE',
                headers: { 'X-CSRF-TOKEN': CSRF },
                success: function (res) {
                    if (res.success) {
                        dt.ajax.reload(null, false);
                        Swal.fire({ icon: 'success', title: 'Dihapus', text: res.message, timer: 1500, showConfirmButton: false });
                    }
                }
            });
        });
    });
}
</script>
@endpush