@extends('layouts.default')

@section('title', 'Data Vendor')

@push('css')
<link href="{{ asset('assets/plugins/datatables/css/dataTables.bootstrap4.css') }}" rel="stylesheet" />
<link href="{{ asset('assets/plugins/datatables/css/buttons/buttons.bootstrap4.css') }}" rel="stylesheet" />
<link href="{{ asset('assets/plugins/datatables/css/responsive/responsive.bootstrap4.css') }}" rel="stylesheet" />
@endpush

@section('content')
<ol class="breadcrumb pull-right">
    <li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
    <li class="breadcrumb-item"><a href="javascript:;">Master</a></li>
    <li class="breadcrumb-item active">Vendor</li>
</ol>

<h1 class="page-header">Data Vendor <small>Manajemen Data Rekanan/Penyedia Jasa</small></h1>

<div class="row">
    <div class="col-lg-12">
        <div class="panel panel-inverse">
            <div class="panel-heading">
                <div class="panel-heading-btn">
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success" data-click="panel-reload"><i class="fa fa-redo"></i></a>
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a>
                </div>
                <h4 class="panel-title">Data Vendor</h4>
            </div>

            <div class="panel-body">
                <table id="data-table-buttons" class="table table-striped table-bordered">
                    <thead>
                        <tr>
                            <th width="1%">#</th>
                            <th>Nama Vendor</th>
                            <th>Pimpinan</th>
                            <th>Telepon</th>
                            <th>Status</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>

                <!-- Modal Form -->
                <div class="modal fade" id="modal-form">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title" id="modal-title">Tambah Vendor</h4>
                                <button type="button" class="close" data-dismiss="modal" onclick="reset_form()" aria-hidden="true">×</button>
                            </div>
                            <div class="modal-body">
                                @include('pages.vendor.form')
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Modal Detail -->
                <div class="modal fade" id="modal-detail">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title">Detail Vendor</h4>
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                            </div>
                            <div class="modal-body">
                                @include('pages.vendor.detail')
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('assets/plugins/datatables/js/jquery.dataTables.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/js/dataTables.bootstrap4.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/js/buttons/dataTables.buttons.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/js/buttons/buttons.bootstrap4.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/js/buttons/jszip.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/js/buttons/pdfmake.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/js/buttons/vfs_fonts.min.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/js/buttons/buttons.html5.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/js/buttons/buttons.print.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/js/responsive/dataTables.responsive.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/js/responsive/responsive.bootstrap4.js') }}"></script>
<script src="{{ asset('assets/plugins/sweetalert/sweetalert.min.js') }}"></script>

<script>
$(document).ready(function () {
    // Init DataTable
    var table = $('#data-table-buttons').DataTable({
        dom: 'Bfrtipl',
        buttons: [
            {
                text: '<i class="fas fa-plus fa-sm"></i> Tambah Data',
                className: 'btn btn-sm btn-success',
                action: function () {
                    reset_form();
                    $('#modal-form').modal('show');
                    $('#modal-title').html("Tambah Vendor");
                    $('#btnSave-title').html("Simpan");
                    $('#_method').val('POST');
                }
            },
            {
                text: '<i class="fas fa-sync fa-sm"></i>',
                className: 'btn btn-sm btn-warning',
                action: function (e, dt, node, config) {
                    dt.ajax.reload();
                }
            },
            { extend: 'copy', className: 'btn-sm btn-success' },
            { extend: 'csv', className: 'btn-sm btn-success' },
            { extend: 'excel', className: 'btn-sm btn-success' },
            { extend: 'pdf', className: 'btn-sm btn-success' },
            { extend: 'print', className: 'btn-sm btn-success' }
        ],
        ajax: '{{ route("ref-vendor.index") }}',
        responsive: true,
        processing: true,
        serverSide: false, // Client side processing
        order: [[0, 'desc']],
        columns: [
            { data: 'id_vendor' },
            { data: 'nama_vendor' },
            { data: 'nama_pimpinan', render: d => d || '-' },
            { data: 'telepon', render: d => d || '-' },
            {
                data: 'status',
                render: function (data) {
                    return data === 'Aktif' 
                        ? '<span class="badge badge-success">Aktif</span>' 
                        : '<span class="badge badge-secondary">Nonaktif</span>';
                }
            },
            {
                data: null,
                orderable: false,
                render: function (data, type, row) {
                    return `
                        <div class="btn-group">
                            <button onclick="detail_action(${row.id_vendor})" class="btn btn-xs btn-info" title="Detail"><i class="fa fa-eye"></i></button>
                            <button onclick="edit_action(${row.id_vendor})" class="btn btn-xs btn-warning" title="Edit"><i class="fa fa-edit"></i></button>
                            <button onclick="delete_action(${row.id_vendor})" class="btn btn-xs btn-danger" title="Hapus"><i class="fa fa-trash"></i></button>
                        </div>`;
                }
            }
        ]
    });
});

// Reset Form
function reset_form() {
    $('#RefVendorForm').trigger("reset");
    $('#id_vendor').val('');
    $('#_method').val('POST');
    if ($('#RefVendorForm').parsley) {
        $('#RefVendorForm').parsley().reset();
    }
}

// Edit Action
function edit_action(id) {
    reset_form();
    $('#modal-form').modal('show');
    $('#modal-title').html("Edit Vendor");
    $('#btnSave-title').html('<i class="fa fa-spinner fa-spin"></i> Loading...');
    
    $.ajax({
        url: `{{ url('ref-vendor') }}/${id}`,
        type: 'GET',
        dataType: 'json',
        success: function(res) {
            if(res.status) {
                let d = res.data;
                $('#id_vendor').val(d.id_vendor);
                $('#nama_vendor').val(d.nama_vendor);
                $('#nama_pimpinan').val(d.nama_pimpinan);
                $('#alamat').val(d.alamat);
                $('#telepon').val(d.telepon);
                $('#email').val(d.email);
                $('#npwp').val(d.npwp);
                $('#nib').val(d.nib);
                $('#jenis_usaha').val(d.jenis_usaha);
                $('#status').val(d.status);
                
                $('#_method').val('PUT');
                $('#btnSave-title').html('Update');
            }
        },
        error: function() {
            $('#modal-form').modal('hide');
            Swal.fire('Error', 'Gagal memuat data.', 'error');
        }
    });
}

// Detail Action
function detail_action(id) {
    Swal.fire({
        title: 'Memuat Data...',
        text: 'Mohon tunggu sebentar',
        allowOutsideClick: false,
        showConfirmButton: false,
        willOpen: () => {
            Swal.showLoading();
        }
    });

    $.ajax({
        url: `{{ url('ref-vendor') }}/${id}`,
        type: 'GET',
        dataType: 'json',
        success: function(res) {
            Swal.close();
            if(res.status) {
                let d = res.data;
                let html = `
                    <table class="table table-bordered">
                        <tr><th width="30%">Nama Vendor</th><td>${d.nama_vendor}</td></tr>
                        <tr><th>Pimpinan</th><td>${d.nama_pimpinan || '-'}</td></tr>
                        <tr><th>Alamat</th><td>${d.alamat || '-'}</td></tr>
                        <tr><th>Telepon</th><td>${d.telepon || '-'}</td></tr>
                        <tr><th>Email</th><td>${d.email || '-'}</td></tr>
                        <tr><th>NPWP</th><td>${d.npwp || '-'}</td></tr>
                        <tr><th>NIB</th><td>${d.nib || '-'}</td></tr>
                        <tr><th>Jenis Usaha</th><td>${d.jenis_usaha || '-'}</td></tr>
                        <tr><th>Status</th><td>${d.status}</td></tr>
                        <tr><th>Dibuat Oleh</th><td>${d.created_by || '-'}</td></tr>
                        <tr><th>Diupdate Oleh</th><td>${d.updated_by || '-'}</td></tr>
                    </table>
                `;
                $('#detail-content').html(html);
                $('#modal-detail').modal('show');
            } else {
                 Swal.fire('Gagal', res.error, 'error');
            }
        },
        error: function() {
            Swal.close();
            Swal.fire('Error', 'Gagal memuat data.', 'error');
        }
    });
}

// Delete Action
function delete_action(id) {
    Swal.fire({
        title: 'Yakin hapus data ini?',
        text: "Data yang dihapus tidak bisa dikembalikan!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: 'Ya, Hapus!'
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: `{{ url('ref-vendor') }}/${id}`,
                type: 'POST',
                data: {
                    _method: 'DELETE',
                    _token: '{{ csrf_token() }}'
                },
                success: function(res) {
                    if(res.status) {
                        Swal.fire('Terhapus!', res.message, 'success');
                        $('#data-table-buttons').DataTable().ajax.reload();
                    } else {
                        Swal.fire('Gagal!', res.error, 'error');
                    }
                },
                error: function() {
                    Swal.fire('Error', 'Terjadi kesalahan sistem.', 'error');
                }
            });
        }
    });
}
</script>
@endpush