@extends('layouts.master')

@section('title', 'Supplier')

@section('styles')
<style>
    #tblProdusen_wrapper .dataTables_filter input {
        border-color: #c8c8c8 !important;
        border-radius: 6px;
        padding: 4px 10px;
    }
    #tblProdusen_wrapper .dataTables_filter input:focus {
        border-color: #a15adf !important;
        box-shadow: 0 0 0 0.18rem rgba(161,90,223,.15) !important;
    }
    #tblProdusen_wrapper .dataTables_length select {
        border-color: #c8c8c8 !important;
        border-radius: 6px;
        padding: 4px 8px;
        min-width: 70px;
    }
    #tblProdusen_wrapper .dataTables_filter label,
    #tblProdusen_wrapper .dataTables_length label {
        font-size: .875rem;
        color: #6c757d;
    }
    #tblProdusen_wrapper .dataTables_info {
        font-size: .8rem;
        color: #6c757d;
    }
    #tblProdusen 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">Supplier</p>
            <span class="fs-13 text-muted">Data Induk &rarr; Supplier</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 Supplier</div>
                    <div class="d-flex gap-2 flex-wrap">
                        @can('produsen.view')
                        <a href="{{ route('data-induk.produsen.export-excel') }}" class="btn btn-success btn-sm">
                            <i class="bx bx-download me-1"></i> Unduh Excel
                        </a>
                        @endcan
                        @can('produsen.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 Supplier
                        </button>
                        @endcan
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="tblProdusen" 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 style="width:80px">Kode</th>
                                    <th>Nama</th>
                                    <th style="width:100px">Tipe</th>
                                    <th style="width:120px">Kota</th>
                                    <th style="width:130px">Telepon</th>
                                    <th class="text-center" style="width:75px">Status</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 modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="modalFormTitle">Tambah Supplier</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="formId">

                <ul class="nav nav-tabs mb-3" id="formTabs">
                    <li class="nav-item">
                        <a class="nav-link active" id="tab-umum-link" data-bs-toggle="tab" href="#tab-umum">
                            <i class="bx bx-info-circle me-1"></i>Umum
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="tab-tagih-link" data-bs-toggle="tab" href="#tab-tagih">
                            <i class="bx bx-receipt me-1"></i>Penagihan
                        </a>
                    </li>
                </ul>

                <div class="tab-content">
                    {{-- Tab Umum --}}
                    <div class="tab-pane fade show active" id="tab-umum">
                        <div class="row">
                            <div class="col-md-2 mb-3">
                                <label class="form-label fw-semibold">Kode <span class="text-danger">*</span></label>
                                <input type="text" id="formKode" class="form-control text-uppercase" maxlength="20" placeholder="Mis. APT" style="text-transform:uppercase">
                                <div class="invalid-feedback" id="errKode"></div>
                                <small class="text-muted">Dipakai di nomor PO/GRN</small>
                            </div>
                            <div class="col-md-7 mb-3">
                                <label class="form-label fw-semibold">Nama <span class="text-danger">*</span></label>
                                <input type="text" id="formNama" class="form-control text-uppercase" maxlength="255" placeholder="Nama supplier" style="text-transform:uppercase">
                                <div class="invalid-feedback" id="errNama"></div>
                            </div>
                            <div class="col-md-3 mb-3">
                                <label class="form-label fw-semibold">Tipe <span class="text-danger">*</span></label>
                                <select id="formTipe" class="form-select">
                                    <option value="Pabrikan">Pabrikan</option>
                                    <option value="Distributor">Distributor</option>
                                    <option value="Importir">Importir</option>
                                    <option value="Lainnya">Lainnya</option>
                                </select>
                                <div class="invalid-feedback" id="errTipe"></div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Alamat</label>
                            <textarea id="formAlamat" class="form-control" rows="2" placeholder="Alamat lengkap"></textarea>
                            <div class="invalid-feedback" id="errAlamat"></div>
                        </div>
                        <div class="row">
                            <div class="col-md-5 mb-3">
                                <label class="form-label fw-semibold">Kota</label>
                                <input type="text" id="formKota" class="form-control" maxlength="100" placeholder="Kota">
                                <div class="invalid-feedback" id="errKota"></div>
                            </div>
                            <div class="col-md-5 mb-3">
                                <label class="form-label fw-semibold">Provinsi</label>
                                <input type="text" id="formProvinsi" class="form-control" maxlength="100" placeholder="Provinsi">
                                <div class="invalid-feedback" id="errProvinsi"></div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <label class="form-label fw-semibold">Telepon</label>
                                <input type="text" id="formTelepon" class="form-control" maxlength="20" placeholder="021-xxx">
                                <div class="invalid-feedback" id="errTelepon"></div>
                            </div>
                            <div class="col-md-5 mb-3">
                                <label class="form-label fw-semibold">U.P. <small class="text-muted">(Untuk Perhatian)</small></label>
                                <input type="text" id="formUp" class="form-control" maxlength="150" placeholder="Nama penerima / divisi tujuan PO">
                                <div class="invalid-feedback" id="errUp"></div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-5 mb-3">
                                <label class="form-label fw-semibold">Email</label>
                                <input type="email" id="formEmail" class="form-control" maxlength="100" placeholder="email@contoh.com">
                                <div class="invalid-feedback" id="errEmail"></div>
                            </div>
                        </div>
                        <div class="mb-1">
                            <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>

                    {{-- Tab Penagihan --}}
                    <div class="tab-pane fade" id="tab-tagih">
                        <div class="row">
                            <div class="col-md-8 mb-3">
                                <label class="form-label fw-semibold">Nama Perusahaan (untuk faktur)</label>
                                <input type="text" id="formNamaPerusahaan" class="form-control text-uppercase" maxlength="255" placeholder="Nama sesuai akta/NPWP" style="text-transform:uppercase">
                                <div class="invalid-feedback" id="errNamaPerusahaan"></div>
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label fw-semibold">NPWP</label>
                                <input type="text" id="formNpwp" class="form-control" maxlength="25" placeholder="xx.xxx.xxx.x-xxx.xxx">
                                <div class="invalid-feedback" id="errNpwp"></div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-semibold">Contact Person</label>
                                <input type="text" id="formContactPerson" class="form-control" maxlength="100" placeholder="Nama PIC">
                                <div class="invalid-feedback" id="errContactPerson"></div>
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label fw-semibold">HP Contact</label>
                                <input type="text" id="formHpContact" class="form-control" maxlength="20" placeholder="08xx-xxxx-xxxx">
                                <div class="invalid-feedback" id="errHpContact"></div>
                            </div>
                        </div>
                        <div class="mb-1">
                            <label class="form-label fw-semibold">Alamat Penagihan</label>
                            <textarea id="formAlamatPenagihan" class="form-control" rows="3" placeholder="Jika beda dengan alamat utama"></textarea>
                            <div class="invalid-feedback" id="errAlamatPenagihan"></div>
                        </div>
                    </div>
                </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 modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title">Detail Supplier</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <p class="fw-semibold text-muted mb-2" style="font-size:.8rem;text-transform:uppercase;letter-spacing:.05em">Umum</p>
                        <table class="table table-sm table-borderless mb-0">
                            <tr><td class="text-muted" width="130">Kode</td><td id="vKode"></td></tr>
                            <tr><td class="text-muted">Nama</td><td id="vNama"></td></tr>
                            <tr><td class="text-muted">Tipe</td><td id="vTipe"></td></tr>
                            <tr><td class="text-muted">Kota</td><td id="vKota"></td></tr>
                            <tr><td class="text-muted">Provinsi</td><td id="vProvinsi"></td></tr>
                            <tr><td class="text-muted">Telepon</td><td id="vTelepon"></td></tr>
                            <tr><td class="text-muted">U.P.</td><td id="vUp"></td></tr>
                            <tr><td class="text-muted">Email</td><td id="vEmail"></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>
                        </table>
                    </div>
                    <div class="col-md-6">
                        <p class="fw-semibold text-muted mb-2" style="font-size:.8rem;text-transform:uppercase;letter-spacing:.05em">Penagihan</p>
                        <table class="table table-sm table-borderless mb-0">
                            <tr><td class="text-muted" width="130">Nama Perusahaan</td><td id="vNamaPerusahaan"></td></tr>
                            <tr><td class="text-muted">NPWP</td><td id="vNpwp"></td></tr>
                            <tr><td class="text-muted">Contact Person</td><td id="vContactPerson"></td></tr>
                            <tr><td class="text-muted">HP Contact</td><td id="vHpContact"></td></tr>
                            <tr><td class="text-muted">Alamat Penagihan</td><td id="vAlamatPenagihan"></td></tr>
                        </table>
                    </div>
                </div>
                <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'         => 'Supplier',
    'importRoute'   => 'data-induk.produsen.import',
    'templateRoute' => 'data-induk.produsen.template-excel',
])
@endsection

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

const TAGIH_FIELDS = ['nama_perusahaan','npwp','contact_person','hp_contact','alamat_penagihan'];

let dt;

$(function () {
    dt = $('#tblProdusen').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: 'kode' },
            { data: 'nama' },
            { data: 'tipe' },
            { data: 'kota', defaultContent: '-' },
            { data: 'telepon', defaultContent: '-' },
            {
                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>';
                }
            },
        ],
        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() {
    ['Kode','Nama','Tipe','Alamat','Kota','Provinsi','Telepon','Up','Email','Catatan',
     'NamaPerusahaan','Npwp','ContactPerson','HpContact','AlamatPenagihan'].forEach(f => {
        $('#form'+f).removeClass('is-invalid');
        $('#err'+f).text('');
    });
}

function showErrors(errors) {
    const map = {
        kode: 'Kode', nama: 'Nama', tipe: 'Tipe', alamat: 'Alamat', kota: 'Kota',
        provinsi: 'Provinsi', telepon: 'Telepon', up: 'Up', email: 'Email', catatan: 'Catatan',
        nama_perusahaan: 'NamaPerusahaan', npwp: 'Npwp',
        contact_person: 'ContactPerson', hp_contact: 'HpContact',
        alamat_penagihan: 'AlamatPenagihan',
    };
    let hasBillingError = false;
    for (const [key, id] of Object.entries(map)) {
        if (errors[key]) {
            $('#form'+id).addClass('is-invalid');
            $('#err'+id).text(errors[key][0]);
            if (TAGIH_FIELDS.includes(key)) hasBillingError = true;
        }
    }
    if (hasBillingError) {
        new bootstrap.Tab('#tab-tagih-link').show();
    }
}

function resetForm() {
    ['Kode','Nama','Tipe','Alamat','Kota','Provinsi','Telepon','Up','Email','Catatan',
     'NamaPerusahaan','Npwp','ContactPerson','HpContact','AlamatPenagihan'].forEach(f => {
        const el = $('#form'+f);
        if (el.is('select')) el.val(el.find('option:first').val());
        else el.val('');
    });
    new bootstrap.Tab('#tab-umum-link').show();
}

function openTambah() {
    clearErrors();
    $('#formId').val('');
    $('#modalFormTitle').text('Tambah Supplier');
    resetForm();
    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 Supplier');
        $('#formKode').val(d.kode);
        $('#formNama').val(d.nama);
        $('#formTipe').val(d.tipe);
        $('#formAlamat').val(d.alamat ?? '');
        $('#formKota').val(d.kota ?? '');
        $('#formProvinsi').val(d.provinsi ?? '');
        $('#formTelepon').val(d.telepon ?? '');
        $('#formUp').val(d.up ?? '');
        $('#formEmail').val(d.email ?? '');
        $('#formCatatan').val(d.catatan ?? '');
        $('#formNamaPerusahaan').val(d.nama_perusahaan ?? '');
        $('#formNpwp').val(d.npwp ?? '');
        $('#formContactPerson').val(d.contact_person ?? '');
        $('#formHpContact').val(d.hp_contact ?? '');
        $('#formAlamatPenagihan').val(d.alamat_penagihan ?? '');
        new bootstrap.Tab('#tab-umum-link').show();
        new bootstrap.Modal('#modalForm').show();
    });
}

function openLihat(id) {
    $.get(URL_BASE + '/' + id, function (res) {
        const d = res.data;
        $('#vKode').text(d.kode);
        $('#vNama').text(d.nama);
        $('#vTipe').text(d.tipe);
        $('#vKota').text(d.kota ?? '-');
        $('#vProvinsi').text(d.provinsi ?? '-');
        $('#vTelepon').text(d.telepon ?? '-');
        $('#vUp').text(d.up ?? '-');
        $('#vEmail').text(d.email ?? '-');
        $('#vCatatan').text(d.catatan ?? '-');
        $('#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>');
        $('#vNamaPerusahaan').text(d.nama_perusahaan ?? '-');
        $('#vNpwp').text(d.npwp ?? '-');
        $('#vContactPerson').text(d.contact_person ?? '-');
        $('#vHpContact').text(d.hp_contact ?? '-');
        $('#vAlamatPenagihan').text(d.alamat_penagihan ?? '-');
        $('#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: {
            kode:             $('#formKode').val().toUpperCase(),
            nama:             $('#formNama').val().toUpperCase(),
            tipe:             $('#formTipe').val(),
            alamat:           $('#formAlamat').val(),
            kota:             $('#formKota').val(),
            provinsi:         $('#formProvinsi').val(),
            telepon:          $('#formTelepon').val(),
            up:               $('#formUp').val(),
            email:            $('#formEmail').val(),
            catatan:          $('#formCatatan').val(),
            nama_perusahaan:  $('#formNamaPerusahaan').val().toUpperCase(),
            npwp:             $('#formNpwp').val(),
            contact_person:   $('#formContactPerson').val(),
            hp_contact:       $('#formHpContact').val(),
            alamat_penagihan: $('#formAlamatPenagihan').val(),
        },
        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) {
    Swal.fire({
        title: 'Hapus supplier 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