@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 Shipping Amount</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_shipping') }}" method="POST">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label">Amount</label>
                        <input type="number" name="amount" class="form-control"
                            placeholder="Enter amount"
                            oninput="this.value = this.value.replace(/[^0-9.]/g, '')" required>
                    </div>
                    <button type="submit" id="submitBtn" class="btn btn-primary w-100">
                        Submit
                    </button>
                </form> --}}
                    <form id="categoryForm" action="{{ route('add_shipping') }}" method="POST">
                        @csrf
                        <!-- STATE -->
                        <div class="mb-3">
                            <label class="form-label">
                                State
                            </label>
                            <select name="state_id" id="state" class="form-control" required>
                                <option value="">
                                    Select State
                                </option>
                                @foreach ($states as $state)
                                    <option value="{{ $state->id }}">
                                        {{ $state->state_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <!-- DISTRICT -->
                        <div class="mb-3">
                            <label class="form-label">
                                District
                            </label>
                            <select name="district_id" id="district" class="form-control" required>
                                <option value="">
                                    Select District
                                </option>
                            </select>
                        </div>
                        <!-- AMOUNT -->
                        <div class="mb-3">
                            <label class="form-label">
                                Amount
                            </label>
                            <input type="number" name="amount" class="form-control" placeholder="Enter amount" min="1" required>
                        </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>State</th>
<th>District</th>
<th>Amount</th>
<th>Status</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 shipping?</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 Load
            table = $('#categoryTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('shipping_data') }}",
                columns: [
{
data:'DT_RowIndex',
orderable:false,
searchable:false
},
{
data:'created_at'
},
{
data:'state_name'
},
{
data:'district_name'
},
{
data:'amount'
},
{
data:'is_active'
},
{
data:'action',
orderable:false,
searchable:false
}
]
            });
            // ADDbh SHIPPING
            $.ajax({
                url: "{{ route('add_shipping') }}",
                type: "POST",
                data: $('#categoryForm').serialize(),
                success: function(response) {
                    toastr.success(response.success);
                },
                error: function(xhr) {
                    if (xhr.status === 422) {
                        toastr.error(xhr.responseJSON.message);
                    } else {
                        toastr.error("Something went wrong");
                    }
                }
            });
            $('#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() {
                        showToast("Something went wrong", 'error');
                        btn.prop('disabled', false).html('Submit');
                    }
                });
            });
            // DELETE BUTTON CLICK
            $(document).on('click', '.deleteBtn', function() {
                $('#delete_id').val($(this).data('id'));
                $('#deleteModal').modal('show');
            });
            // DELETE CONFIRM
            $('#deleteForm').submit(function(e) {
                e.preventDefault();
                $.ajax({
                    url: "{{ route('delete_shipping') }}",
                    type: "POST",
                    data: {
                        id: $('#delete_id').val(),
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(res) {
                        $('#deleteModal').modal('hide');
                        showToast(res.success, 'success');
                        table.ajax.reload(null, false);
                    }
                });
            });
        });
        // 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>
    <script>
        $('#state').change(function() {
            let stateID = $(this).val();
            $.ajax({
                url: "{{ route('districtByState', '') }}/" + stateID,
                type: "GET",
                success: function(data) {
                    let option = '<option>Select District</option>';
                    data.forEach(function(d) {
                        option +=
                            '<option value="' + d.id + '">' +
                            d.district_name +
                            '</option>';
                    });
                    $('#district').html(option);
                }
            });
        });
    </script>
@endsection