@extends('backend.layout.main')

@section('title','Judgement Type Management')

@section('content')
<div class="page-wrapper">
    <div class="content">

        <!-- PAGE HEADER -->
        <div class="d-md-flex page-breadcrumb mb-3">
            <div class="my-auto mb-2">
                <h2 class="mb-1">Judgement Type Management</h2>
            </div>
            <div class="ms-auto">
                <button class="btn btn-primary"
                        data-bs-toggle="offcanvas"
                        data-bs-target="#typeOffcanvas">
                    <i class="fa fa-plus me-2"></i> Add Judgement Type
                </button>
            </div>
        </div>

        <!-- TABLE -->
        <div class="card mb-3">
            <div class="card-body">
                <table class="table table-bordered" id="typeTable">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Judgement</th>
                            <th>Name</th>
                            <th>Slug</th>
                            <th>Status</th>
                            <th width="120">Action</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>

        <!-- OFFCANVAS FORM -->
        <div class="offcanvas offcanvas-end" tabindex="-1" id="typeOffcanvas">
            <div class="offcanvas-header">
                <h5 class="offcanvas-title">Add / Update Judgement Type</h5>
                <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
            </div>

            <div class="offcanvas-body">
                <form id="typeForm">
                    @csrf
                    <input type="hidden" name="id" id="id">

                    <div class="mb-3">
                        <label>Judgement</label>
                        <select name="judgement_id" id="judgement_id" class="form-control">
                            <option value="">Select Judgement</option>
                            @foreach($judgements as $judgement)
                                <option value="{{ $judgement->id }}">
                                    {{ $judgement->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label>Type Name</label>
                        <input type="text"
                               name="name"
                               id="name"
                               class="form-control"
                               placeholder="Enter judgement type">
                    </div>

                    <div class="d-flex gap-2 mt-3">
                        <button type="button"
                                class="btn btn-secondary w-50"
                                data-bs-dismiss="offcanvas">
                            Cancel
                        </button>
                        <button type="submit"
                                class="btn btn-primary w-50"
                                id="submitBtn">
                            Save
                        </button>
                    </div>
                </form>
            </div>
        </div>

    </div>
</div>
@endsection

@push('scripts')
<script>
let typeTable;

$(document).ready(function () {

    fetchTypes();

    function initDataTable() {
        typeTable = $('#typeTable').DataTable({
            destroy: true,
            responsive: true,
            pageLength: 10,
            dom: 'Bfrtip',
            buttons: [
                {
                    extend: 'collection',
                    text: '<i class="fa fa-download me-1"></i> Export',
                    className: 'btn btn-primary',
                    buttons: ['copy','csv','excel','pdf','print']
                },
                {
                    extend: 'colvis',
                    text: '<i class="fa fa-columns me-1"></i> Columns',
                    className: 'btn btn-secondary'
                }
            ]
        });
    }

    function fetchTypes() {
        $.get("{{ route('admin.judgementtypes.fetch') }}", function (res) {

            let rows = '';
            $.each(res.data, function (i, item) {
                rows += `
                <tr>
                    <td>${item.id}</td>
                    <td>${item.judgement?.name ?? ''}</td>
                    <td>${item.name}</td>
                    <td>${item.slug ?? '-'}</td>
                    <td class="text-center">
                        <button class="toggle-status btn btn-sm ${item.status ? 'btn-success':'btn-danger'}"
                                data-id="${item.id}">
                            ${item.status ? 'Active':'Inactive'}
                        </button>
                    </td>
                    <td>
                        <button class="btn btn-sm edit"
                                data-item='${JSON.stringify(item)}'>
                            <i class="fa fa-edit text-info"></i>
                        </button>
                        <button class="btn btn-sm delete"
                                data-id="${item.id}">
                            <i class="fa fa-trash text-danger"></i>
                        </button>
                    </td>
                </tr>`;
            });

            if ($.fn.DataTable.isDataTable('#typeTable')) {
                typeTable.destroy();
            }

            $('#typeTable tbody').html(rows);
            initDataTable();
        });
    }

    // SAVE / UPDATE
    $('#typeForm').submit(function (e) {
        e.preventDefault();

        $.post("{{ route('admin.judgementtypes.store') }}",
            $(this).serialize(),
            function (res) {
                toastr.success(res.message);
                resetForm();

                let canvas = document.getElementById('typeOffcanvas');
                bootstrap.Offcanvas.getInstance(canvas).hide();

                fetchTypes();
            }
        );
    });

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

        $('#id').val(item.id);
        $('#judgement_id').val(item.judgement_id);
        $('#name').val(item.name);
        $('#submitBtn').text('Update');

        let canvas = new bootstrap.Offcanvas('#typeOffcanvas');
        canvas.show();
    });

    function resetForm() {
        $('#typeForm')[0].reset();
        $('#id').val('');
        $('#submitBtn').text('Save');
    }

    // DELETE
    $(document).on('click', '.delete', function () {
        if (!confirm('Delete this judgement type?')) return;

        $.ajax({
            url: "{{ route('admin.judgementtypes.delete') }}",
            type: "DELETE",
            data: {
                _token: '{{ csrf_token() }}',
                id: $(this).data('id')
            },
            success: function (res) {
                toastr.success(res.message);
                fetchTypes();
            }
        });
    });

    // TOGGLE STATUS
    $(document).on('click', '.toggle-status', function () {
        $.ajax({
            url: "{{ route('admin.judgementtypes.toggle') }}",
            type: "PATCH",
            data: {
                _token: '{{ csrf_token() }}',
                id: $(this).data('id')
            },
            success: function (res) {
                toastr.success(res.message);
                fetchTypes();
            }
        });
    });

});
</script>
@endpush