@extends('Admin.layout')
<style>
    .custom-file-upload {
        display: flex;
        align-items: center;
        border: 1px solid #dcdcdc;
        border-radius: 8px;
        overflow: hidden;
        height: 44px;
    }

    .custom-file-upload .choose-btn {
        border-radius: 8px 0 0 8px;
        padding: 10px 18px;
        white-space: nowrap;
        height: 44px;
    }

    .custom-file-upload .file-name {
        border: none;
        border-left: 1px solid #dcdcdc;
        height: 44px;
        border-radius: 0 8px 8px 0;
    }

    .custom-file-upload .file-name:focus {
        box-shadow: none;
    }
</style>
@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        <!-- Page Title -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h4 class="mb-0">Create Type</h4>
        </div>
        <!-- Create Shipping -->
        <div class="row justify-content-center mb-4">
            <div class="col-md-6">
                <div class="card p-4 shadow-sm">
                   
                    <form id="categoryForm" action="{{ route('add_type_form') }}" method="POST">
    @csrf

    <!-- Type -->
    <div class="mb-3">
        <label class="form-label">Type</label>
        <input type="text" name="type" 
            class="form-control @error('type') is-invalid @enderror" 
            placeholder="Enter type" 
            value="{{ old('type') }}" required>

        @error('type')
            <span class="text-danger">{{ $message }}</span>
        @enderror
    </div>

    <!-- Description -->
    <div class="mb-3">
        <label class="form-label">Description</label>
        <input type="text" name="description" 
            class="form-control @error('description') is-invalid @enderror" 
            placeholder="Enter description"
            value="{{ old('description') }}" required>

        @error('description')
            <span class="text-danger">{{ $message }}</span>
        @enderror
    </div>

    <button type="submit" id="submitBtn" class="btn btn-primary w-100">
        Submit
    </button>
</form>
                </div>
            </div>
        </div>
        <!-- Shipping Table -->
        <div class="card p-3 shadow-sm">
            <div class="table-responsive">
                <table id="categoryTable" class="table table-bordered">
                    <thead>
                        <tr>
                            <th>S.No</th>
                            <th>Created Date</th>
                            <th>Type</th>
                            <th>Description</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
    <!-- DELETE MODAL -->
    <div class="modal fade" id="deleteModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-sm modal-dialog-centered">
            <div class="modal-content text-center p-4">
                <form id="deleteForm">
                    @csrf
                    <input type="hidden" id="delete_id">
                    <h4>Are you sure?</h4>
                    <p>Do you really want to delete this type?</p>
                    <div class="d-flex gap-2">
                        <button type="button" class="btn btn-secondary w-100" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-danger w-100">
                            Yes Delete
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- Toast -->
    <div class="position-fixed top-0 end-0 p-3" style="z-index:9999">
        <div id="customToast" class="toast text-white border-0">
            <div class="d-flex">
                <div class="toast-body" id="customToastBody"></div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
            </div>
        </div>
    </div>
    <!-- ================= Scripts ================= -->
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
    <script>
        let table;
        $(document).ready(function() {
            // ================= DATATABLE =================
            table = $('#categoryTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('type_data') }}",
                columns: [{
                        data: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'created_at'
                    },
                    {
                        data: 'type'
                    },
                     {
                        data: 'description'
                    },
                    {
                        data: 'action',
                        orderable: false,
                        searchable: false
                    }
                ]
            });
            // ================= ADD TYPE =================
            $('#categoryForm').submit(function(e) {
                e.preventDefault();
                let form = $(this);
                let btn = $('#submitBtn');
                btn.prop('disabled', true).html('Processing...');
                $.ajax({
                    url: form.attr('action'),
                    type: "POST",
                    data: form.serialize(),
                    success: function(res) {
                        showToast(res.success, 'success');
                        form[0].reset();
                        table.ajax.reload(null, false);
                        btn.prop('disabled', false).html('Submit');
                    },
                    error: function(xhr) {
                        console.log(xhr.responseText);
                        showToast("Something went wrong", 'error');
                        btn.prop('disabled', false).html('Submit');
                    }
                });
            });
            // ================= DELETE BUTTON CLICK =================
            $(document).on('click', '.deleteBtn', function() {
                let id = $(this).data('id');
                $('#delete_id').val(id);
                let modal = new bootstrap.Modal(document.getElementById('deleteModal'));
                modal.show();
            });
            // ================= DELETE CONFIRM =================
            $('#deleteForm').submit(function(e) {
                e.preventDefault();
                $.ajax({
                    url: "{{ route('delete_type') }}",
                    type: "POST",
                    data: {
                        id: $('#delete_id').val(),
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(res) {
                        let modalEl = document.getElementById('deleteModal');
                        let modal = bootstrap.Modal.getInstance(modalEl);
                        modal.hide();
                        showToast(res.success, 'success');
                        table.ajax.reload(null, false);
                    },
                    error: function(xhr) {
                        console.log(xhr.responseText);
                        showToast("Delete Failed", 'error');
                    }
                });
            });
        });
        // ================= TOAST FUNCTION =================
        function showToast(message, type = "success") {
            let toast = document.getElementById("customToast");
            let body = document.getElementById("customToastBody");
            body.innerText = message;
            toast.classList.remove("bg-success", "bg-danger");
            toast.classList.add(type == "success" ? "bg-success" : "bg-danger");
            new bootstrap.Toast(toast).show();
        }
    </script>
@endsection