@extends('layout.master')

@push('plugin-styles')
<link href="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet" />
<link href="{{ asset('assets/plugins/@mdi/css/materialdesignicons.min.css') }}" rel="stylesheet" />
@endpush

@section('content')
<nav class="page-breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Master</a></li>
        <li class="breadcrumb-item active" aria-current="page">Kategori</li>
    </ol>
</nav>

<div class="row">
    <div class="col-md-12 grid-margin stretch-card">
        <div class="card">
            <div class="card-body">
                <h6 class="card-title">Data Master Spesifikasi</h6>
                <table id="datatable-serverside" class="table table-sm" style="width: 100%;">
                    <thead>
                        <tr>
                            <th class="kolomNomor">No.</th>
                            <th>Nama Spesifikasi</th>
                            <th class="kolomAksi">Aksi</th>
                        </tr>
                    </thead>
                </table>
            </div>
            <div class="card-footer" style="text-align: right;">
                @can('master-data.create')
                <button class="btn btn-info btn-custom1" data-bs-toggle="modal" data-bs-target="#createModal">
                    Tambah Data</button>
                @endcan
            </div>
        </div>
    </div>
</div>

{{-- Modal --}}
<div id="createModal" class="modal fade" data-bs-backdrop="static">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title h4">Tambah Data</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
            </div>
            <div class="modal-body">
                <form id="form-create" class="forms-sample" onsubmit="storeData(this)">
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label">Nama Spesifikasi</label>
                                <input type="text" class="form-control required" name="nama" autocomplete="off" placeholder="Nama Spesifikasi">
                            </div>
                        </div>
                        <div class="col-12" style="text-align: right;">
                            <button type="submit" class="btn btn-primary btn-custom1">Simpan</button>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Keluar</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div id="editModal" class="modal fade" data-bs-backdrop="static">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title h4">Edit Data</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
            </div>
            <div class="modal-body">
                <form id="form-edit" class="forms-sample" onsubmit="updateData(this)">
                    <input type="hidden" name="id">
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label">Nama Spesifikasi</label>
                                <input type="text" class="form-control required" name="nama" autocomplete="off" placeholder="Nama Spesifikasi">
                            </div>
                        </div>
                        <div class="col-12" style="text-align: right;">
                            <button type="submit" class="btn btn-primary btn-custom1">Simpan</button>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Keluar</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{{-- Akhiran Modal --}}
@endsection

@push('plugin-scripts')
<script src="{{ asset('assets/plugins/datatables-net/jquery.dataTables.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.js') }}"></script>
@endpush

@push('custom-scripts')
<script src="{{ asset('assets/js/data-table.js') }}"></script>
<script src="{{ asset('assets/js/sweet-alert.js') }}"></script>

<script>
    let datatable = $('#datatable-serverside').DataTable({
        lengthMenu: lengthMenuDatatable(),
        processing: true,
        serverSide: true,
        ajax: "{{ route('master.spesifikasi.index') }}",
        columns: [{
                data: 'DT_RowIndex',
                name: 'id',
                searchable: boolPhpToJs("{{ isColumnSearchable(\App\Http\Controllers\MasterSpesifikasiController::columnSearchable(), 'nama') }}"),
                orderable: boolPhpToJs("{{ isColumnOrderable(\App\Http\Controllers\MasterSpesifikasiController::columnOrderable(), 'nama') }}"),
            },
            {
                data: 'nama',
                name: 'nama',
                searchable: boolPhpToJs("{{ isColumnSearchable(\App\Http\Controllers\MasterSpesifikasiController::columnSearchable(), 'nama') }}"),
                orderable: boolPhpToJs("{{ isColumnOrderable(\App\Http\Controllers\MasterSpesifikasiController::columnOrderable(), 'nama') }}"),
            },
            {
                data: 'aksi',
                name: 'aksi',
                searchable: boolPhpToJs("{{ isColumnSearchable(\App\Http\Controllers\MasterSpesifikasiController::columnSearchable(), 'aksi') }}"),
                orderable: boolPhpToJs("{{ isColumnOrderable(\App\Http\Controllers\MasterSpesifikasiController::columnOrderable(), 'aksi') }}"),
                class: 'text-center'
            },
        ],
    });

    $(`
    <div class="form-text text-wrap" style="width: 220px">
      Column: ` +
        `{!! columnSearchableToString(\App\Http\Controllers\MasterSpesifikasiController::columnSearchable()) !!}` +
        `
    </div>
  `).insertAfter(".dataTables_filter [type='search']");

    const storeData = (element) => {
        event.preventDefault();
        if (cekForm('form-create') == true) {
            let data = {
                _token: "{{ csrf_token() }}",
                nama: $(element).find('[name="nama"]').val(),
            }

            sendJson("{{ route('master.spesifikasi.store') }}", data, callbackReloadDatatable);
            $('#createModal').modal('hide');
        }
    }

    $('#createModal').on('hidden.bs.modal', function() {
        $('#form-create').trigger('reset');
    });

    const editData = (id, nama) => {
        $('#editModal').find('[name="nama"]').val(nama);
        $('#editModal').find('[name="id"]').val(id);
        $('#editModal').modal('show');
    }

    const updateData = (element) => {
        event.preventDefault();
        if (cekForm('form-edit') == true) {
            let data = {
                _token: "{{ csrf_token() }}",
                nama: $(element).find('[name="nama"]').val(),
            }

            let url = "{{ route('master.spesifikasi.update', ':id') }}";
            url = url.replace(':id', $(element).find('[name="id"]').val());

            sendJson(url, data, callbackReloadDatatable);
            $('#editModal').modal('hide');
        }
    }

    $('#editModal').on('hidden.bs.modal', function() {
        $('#form-edit').trigger('reset');
    });
</script>
@endpush