@extends('layouts.adminlte')
@section('title','Customer')

@section('content')
<button class="btn btn-primary mb-2" id="btnTambah">Tambah</button>
<a href="{{ route('customer.export') }}" 
   class="btn btn-success mb-2">
   Export Excel
</a>
<a href="{{ route('customer.template') }}" class="btn btn-outline-secondary mb-2">
    Download Template
</a>
<form action="{{ route('customer.import') }}" method="POST" enctype="multipart/form-data" class="d-inline">
    @csrf
    <input type="file" name="file" required>
    <button class="btn btn-info mb-2">Import</button>
</form>

<table class="table table-bordered" id="tableCustomer" width="100%">
    <thead>
        <tr>
            <th>Nama</th>
            <th>CP</th>
            <th>Alamat</th>
            <th width="120">Aksi</th>
        </tr>
    </thead>
</table>

{{-- MODAL --}}
<div class="modal fade" id="modalForm">
    <div class="modal-dialog">
        <form id="formCustomer">
            @csrf
            <input type="hidden" id="id_customer" name="id_customer">

            <div class="modal-content">
                <div class="modal-header">
                    <h5>Customer</h5>
                </div>

                <div class="modal-body">
                    <input class="form-control mb-2" name="nama_customer" placeholder="Nama Customer" required>
                    <input class="form-control mb-2" name="cp" placeholder="Contact Person">
                    <textarea class="form-control" name="alamat" placeholder="Alamat"></textarea>
                </div>

                <div class="modal-footer">
                    <button class="btn btn-success">Simpan</button>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')

<script>
$(function () {

    /* ===============================
       DATATABLE
    =============================== */
    let table = $('#tableCustomer').DataTable({
        processing: true,
        ajax: {
            url: "{{ route('customer.data') }}",
            dataSrc: 'data'
        },
        columns: [
            { data: 'nama_customer' },
            { data: 'cp' },
            { data: 'alamat' },
            {
                data: 'id_customer',
                render: function (data) {
                    return `
                        <button class="btn btn-warning btn-sm edit" data-id="${data}">Edit</button>
                        <button class="btn btn-danger btn-sm delete" data-id="${data}">Hapus</button>
                    `;
                },
                orderable: false,
                searchable: false
            }
        ]
    });

    /* ===============================
       TAMBAH
    =============================== */
    $('#btnTambah').click(function () {
        $('#formCustomer')[0].reset();
        $('#id_customer').val('');
        $('#modalForm').modal('show');
    });

    /* ===============================
       SIMPAN
    =============================== */
    $('#formCustomer').submit(function (e) {
        e.preventDefault();

        $.post("{{ route('customer.store') }}", $(this).serialize(), function () {
            $('#modalForm').modal('hide');
            table.ajax.reload(null, false);
        });
    });

    /* ===============================
       EDIT BUTTON
    =============================== */
    $(document).on('click', '.edit', function () {
        let id = $(this).data('id');

        $.get("{{ url('master/customer/edit') }}/" + id, function (res) {
            $('#id_customer').val(res.id_customer);
            $('[name=nama_customer]').val(res.nama_customer);
            $('[name=cp]').val(res.cp);
            $('[name=alamat]').val(res.alamat);

            $('#modalForm').modal('show');
        });
    });

    /* ===============================
       DELETE
    =============================== */
    $(document).on('click', '.delete', function () {
        if (!confirm('Hapus data?')) return;

        $.ajax({
            url: "{{ url('master/customer/delete') }}/" + $(this).data('id'),
            type: "DELETE",
            data: { _token: "{{ csrf_token() }}" },
            success: function () {
                table.ajax.reload(null, false);
            }
        });
    });

    /* ===============================
       DOUBLE CLICK INLINE EDIT
    =============================== */
    $('#tableCustomer tbody').on('dblclick', 'td', function () {

        let cell = table.cell(this);
        let rowData = table.row(this).data();
        let colIndex = cell.index().column;

        // kolom aksi jangan diedit
        if (colIndex === 3) return;

        let oldValue = cell.data();

        if ($(this).find('input').length) return;

        $(this).html(`
            <input type="text" class="form-control form-control-sm edit-cell"
                   value="${oldValue}">
        `);

        let input = $(this).find('input');
        input.focus().select();

        function saveValue() {
            let newValue = input.val();

            cell.data(newValue).draw(false);

            let field = ['nama_customer','cp','alamat'][colIndex];

            $.post("{{ route('customer.store') }}", {
                _token: "{{ csrf_token() }}",
                id_customer: rowData.id_customer,
                [field]: newValue
            });
        }

        input.on('blur', saveValue);

        input.on('keydown', function(e){
            if(e.key === 'Enter'){
                e.preventDefault();
                saveValue();
            }
        });

    });

});
</script>
@endpush