@extends('layouts.app')

@section('title', 'Master Carriers')

@section('page-specific-style')
    <!-- DataTables -->
    <link href="{{ asset('assets/libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css') }}" rel="stylesheet"
        type="text/css" />
    <link href="{{ asset('assets/libs/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css') }}" rel="stylesheet"
        type="text/css" />
    <link href="{{ asset('assets/libs/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css') }}" rel="stylesheet"
        type="text/css" />
@endsection

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h4 class="mb-0">Carrier</h4>
                    @can('Create carrier')
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                            data-bs-target="#createCarrierModal" id="createCarrierBtn"><i class="mdi mdi-plus me-1"></i> Create
                            Carrier</button>
                    @endcan
                </div>
            </div>
        </div>
        {{-- <h1>Carriers</h1>
    <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#createCarrierModal" id="createCarrierBtn">Create Carrier</button> --}}

        <div class="card">
            <div class="card-body">
                @include('includes.alerts')
                @include('includes.errors')
                <table class="table table-bordered dt-responsive nowrap w-100" id="carriers-table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Website</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- Data will be loaded via AJAX -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Create Carrier Modal -->
    <div class="modal fade" id="createCarrierModal" tabindex="-1" aria-labelledby="createCarrierModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form id="createCarrierForm" method="POST">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title" id="createCarrierModalLabel">Create Carrier</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="createName" class="form-label">Name</label>
                            <input type="text" class="form-control" id="createName" name="name" required>
                        </div>
                        <div class="mb-3">
                            <label for="createWebsite" class="form-label">Website</label>
                            <input type="url" class="form-control" id="createWebsite" name="website">
                        </div>
                        <div class="form-check form-switch mb-3" dir="ltr">
                            <input class="form-check-input" type="checkbox" id="createIsActive" name="isActive" checked>
                            <label class="form-check-label" for="createIsActive">Status</label>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Edit Carrier Modal -->
    <div class="modal fade" id="editCarrierModal" tabindex="-1" aria-labelledby="editCarrierModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form id="editCarrierForm" method="POST">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title" id="editCarrierModalLabel">Edit Carrier</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="editName" class="form-label">Name</label>
                            <input type="text" class="form-control" id="editName" name="name" required>
                        </div>
                        <div class="mb-3">
                            <label for="editWebsite" class="form-label">Website</label>
                            <input type="url" class="form-control" id="editWebsite" name="website">
                        </div>
                        <div class="form-check form-switch mb-3" dir="ltr">
                            <input class="form-check-input" type="checkbox" id="editIsActive" name="isActive">
                            <label class="form-check-label" for="editIsActive">Status</label>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Delete Confirmation Modal -->
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">Confirm Deletion</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    Are you sure you want to delete the carrier: <span id="carrierName"></span>?
                </div>
                <div class="modal-footer">
                    <form id="delete-form" action="" method="POST">
                        @csrf
                        @method('DELETE')
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-danger">Delete</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('page-specific-script')
    <script src="{{ asset('assets/libs/datatables.net/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/libs/datatables.net-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('assets/libs/datatables.net-responsive/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('assets/libs/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js') }}"></script>

    <script>
        $(document).ready(function() {
            var carriersTable = $('#carriers-table').DataTable({
                responsive: true,
                lengthChange: false,
                processing: true,
                serverSide: true,
                ajax: '{{ route('carriers.datatable') }}',
                columns: [{
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'website',
                        name: 'website'
                    },
                    {
                        data: 'status',
                        name: 'status',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'actions',
                        name: 'actions',
                        orderable: false,
                        searchable: false
                    }
                ]
            });

            // Show modal for creating a new carrier
            $('#createCarrierBtn').on('click', function() {
                $('#createCarrierForm').attr('action', '{{ route('carriers.store') }}');
                $('#createCarrierForm')[0].reset();
                $('#createCarrierModalLabel').text('Create Carrier');
                $('#createIsActive').prop('checked', true); // Set default to checked
            });

            // Handle form submission for create
            $('#createCarrierForm').on('submit', function(e) {
                e.preventDefault();
                let actionUrl = $(this).attr('action');
                let formData = $(this).serialize();

                $.ajax({
                    type: 'POST',
                    url: actionUrl,
                    data: formData,
                    success: function(response) {
                        $('#createCarrierModal').modal('hide');
                        carriersTable.ajax.reload(); // Refresh DataTable
                        // Show success message if needed
                        if (response.message) {
                            alert(response.message);
                        }
                    },
                    error: function(xhr) {
                        let errors = xhr.responseJSON.errors;
                        let errorMessages = '';
                        for (let key in errors) {
                            if (errors.hasOwnProperty(key)) {
                                errorMessages += errors[key][0] + '\n';
                            }
                        }
                        alert(errorMessages);
                    }
                });
            });

            // Edit carrier
            $(document).on('click', '.editCarrierBtn', function() {
                let id = $(this).data('id');
                $.get("{{ url('carriers') }}/" + id + "/edit", function(data) {
                    $('#editCarrierModalLabel').text('Edit Carrier');
                    $('#editName').val(data.name);
                    $('#editWebsite').val(data.website);
                    $('#editIsActive').prop('checked', data.is_active);
                    $('#editCarrierForm').attr('action', "{{ url('carriers') }}/" + id);
                    $('#editCarrierForm').append(
                    '<input type="hidden" name="_method" value="PUT">');
                    $('#editCarrierModal').modal('show');
                });
            });

            // Handle form submission for edit
            $('#editCarrierForm').on('submit', function(e) {
                e.preventDefault();
                let actionUrl = $(this).attr('action');
                let formData = $(this).serialize();

                $.ajax({
                    type: 'POST',
                    url: actionUrl,
                    data: formData,
                    success: function(response) {
                        $('#editCarrierModal').modal('hide');
                        carriersTable.ajax.reload(); // Refresh DataTable
                        // Show success message if needed
                        if (response.message) {
                            alert(response.message);
                        }
                    },
                    error: function(xhr) {
                        let errors = xhr.responseJSON.errors;
                        let errorMessages = '';
                        for (let key in errors) {
                            if (errors.hasOwnProperty(key)) {
                                errorMessages += errors[key][0] + '\n';
                            }
                        }
                        alert(errorMessages);
                    }
                });
            });

            // Handle Delete Modal
            var deleteModal = document.getElementById('deleteModal');
            deleteModal.addEventListener('show.bs.modal', function(event) {
                var button = event.relatedTarget;
                var carrierId = button.getAttribute('data-carrier-id');
                var carrierName = button.getAttribute('data-carrier-name');

                var form = deleteModal.querySelector('#delete-form');
                var nameField = deleteModal.querySelector('#carrierName');

                nameField.textContent = carrierName;
                form.action = `/carriers/${carrierId}`;
            });

            // Handle delete form submission
            $('#delete-form').on('submit', function(e) {
                e.preventDefault();
                let actionUrl = $(this).attr('action');
                let formData = $(this).serialize();

                $.ajax({
                    type: 'POST',
                    url: actionUrl,
                    data: formData,
                    success: function(response) {
                        $('#deleteModal').modal('hide');
                        carriersTable.ajax.reload(); // Refresh DataTable
                        // Show success message if needed
                        if (response.message) {
                            alert(response.message);
                        }
                    },
                    error: function(xhr) {
                        alert('Error deleting carrier. Please try again.');
                    }
                });
            });
        });
    </script>
@endsection