@extends('layouts.app')

@section('content')
    <div class="row mb-3">
        <div class="col-md-6">
            <h2>Data Departemen</h2>
        </div>
        <div class="col-md-6 text-end">
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createModal">
                Tambah Data
            </button>
        </div>
    </div>

    <div class="card shadow-sm border-0 rounded-4">
        <div class="card-body">
            <div class="table-responsive">
                <table id="datatable" class="table table-hover table-sm align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th class="d-none d-md-table-cell" style="width: 20px">No</th>
                            <th>Departemen</th>
                            <th width="180" class="text-center">Aksi</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>

            <nav class="mt-3">
                <ul class="pagination pagination-sm justify-content-end" id="pagination"></ul>
            </nav>
        </div>
    </div>

    <div class="modal fade" id="editModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title">Edit Departemen</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    </button>
                </div>

                <div class="modal-body">
                    <form method="POST" id="formEditdepartemen">
                        @csrf
                        @method('PUT')

                        <input type="hidden" name="id" id="edit_id">
                        <input type="hidden" id="old_departemen">

                        <div class="form-group">
                            <label for="edit_departemen">Departemen</label>

                            <input type="text" name="departemen" id="edit_departemen"
                                class="form-control @error('departemen') is-invalid @enderror"
                                placeholder="Masukkan Departemen" autocomplete="off">

                            <span id="messageDepartemen" class="text-danger"></span>

                            @error('departemen')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>

                        <div class="modal-footer">
                            <button type="submit" id="buttonEditDepartemen" class="btn btn-primary">
                                Simpan
                            </button>

                            <button type="reset" class="btn btn-secondary">
                                Batalkan
                            </button>
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </div>

    <div class="modal fade" id="createModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title">Tambah departemen</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    </button>
                </div>

                <div class="modal-body">
                    <form action="{{ route('departemen.store') }}" method="POST" id="formCreateDepartemen">
                        @csrf

                        <div class="form-group">
                            <label for="departemenCreate">departemen</label>

                            <input type="text" name="departemen" id="departemenCreate"
                                class="form-control @error('departemen') is-invalid @enderror"
                                placeholder="Masukkan departemen" autocomplete="off">

                            <span id="messageDepartemenCreate" class="text-danger"></span>

                            @error('departemen')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>

                        <div class="modal-footer">
                            <button type="submit" id="buttonCreatedepartemen" class="btn btn-primary">
                                Simpan
                            </button>

                            <button type="reset" class="btn btn-secondary">
                                Batalkan
                            </button>
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function() {

            var table = $('#datatable').DataTable({
                processing: false,
                ordering: false,
                serverSide: false,
                ajax: "{{ route('departemen.getData') }}",
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false,
                    },
                    {
                        data: 'departemen',
                        name: 'departemen'
                    },
                    {
                        data: 'id',
                        name: 'id',
                        orderable: false,
                        searchable: false,
                        render: function(data, type, row) {
                            return `
                            <div class="d-flex gap-1">
                                <button
                                    type="button"
                                    class="btn btn-sm btn-warning btn-edit"
                                    data-id="${row.id}">
                                    <i class="bi bi-pencil"></i>
                                    <span class="d-none d-md-inline ms-1">
                                        Edit
                                    </span>
                                </button>

                                <form action="/departemen/${row.id}"
                                    method="POST"
                                    onsubmit="return confirm('Yakin ingin menghapus data ini?')"
                                    style="display:inline;">
                                    <input type="hidden"
                                        name="_token"
                                        value="{{ csrf_token() }}">

                                    <input type="hidden"
                                        name="_method"
                                        value="DELETE">

                                    <button type="submit"
                                        class="btn btn-sm btn-danger">
                                         <i class="bi bi-trash"></i>
                                        <span class="d-none d-md-inline ms-1">
                                                        Hapus
                                                    </span>
                                    </button>
  
                                </form>
                            </div>
                        `;
                        }
                    }
                ]
            });

            // Edit
            $('#datatable tbody').on('click', '.btn-edit', function(e) {

                e.preventDefault();

                let id = $(this).data('id');

                $.ajax({
                    url: `/departemen/${id}`,
                    type: 'GET',
                    success: function(data) {

                        $('#edit_id').val(data.id);
                        $('#old_departemen').val(data.departemen);
                        $('#edit_departemen').val(data.departemen);

                        $('#formEditdepartemen').attr(
                            'action',
                            `/departemen/${data.id}`
                        );

                        $('#editModal').modal('show');
                    },
                    error: function(xhr) {
                        console.log(xhr.responseText);
                    }
                });
            });

            // Validasi Edit
            $(document).on('click', '#buttonEditDepartemen', function(e) {

                e.preventDefault();

                const departemen = $('#edit_departemen')
                    .val()
                    .trim()
                    .toLowerCase();

                const old_departemen = $('#old_departemen')
                    .val()
                    .trim()
                    .toLowerCase();

                $('#messageDepartemen').text('');

                let valid = true;

                if (!departemen) {
                    $('#messageDepartemen')
                        .text('departemen tidak boleh kosong.');
                    valid = false;
                }

                if (departemen === old_departemen) {
                    $('#messageDepartemen')
                        .text('departemen tidak boleh sama.');
                    valid = false;
                }

                if (valid) {
                    $('#formEditdepartemen').submit();
                }
            });

            $('#editModal').on('hidden.bs.modal', function() {
                $('#messageDepartemen').text('');
            });

            // Validasi Create
            $(document).on('click', '#buttonCreatedepartemen', function(e) {

                e.preventDefault();

                const departemen = $('#departemenCreate').val();

                $('#messageDepartemenCreate').text('');

                if (!departemen) {
                    $('#messageDepartemenCreate')
                        .text('departemen tidak boleh kosong.');
                    return;
                }

                $('#formCreateDepartemen').submit();
            });

            $('#createModal').on('hidden.bs.modal', function() {
                $('#messageDepartemenCreate').text('');
            });

        });
    </script>
@endsection
