@extends('adminlte::page')
@section('title', 'ORBI Dashboard')

@section('content_header')
    <h1>Model</h1>
@stop

@section('content')
    <div class="card card-dark">
        <div class="card-header">
            <h3 class="card-title"></h3>
            <div class="card-tools">
                <a href="{{ route('cargo.model.create')}}" class="btn btn-dark float-right">
                    <i class="fas fa-plus"></i> Add Model
                </a>
            </div>
        </div>

        <didv class="card-body">
            <table class="table table-bordered registerBusiness-datatable">
                <thead>
                    <tr>
                        <th>Model Name</th>
                        <th>Brand Name</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
     <!-- status Modal -->
        <div class="modal fade" id="statusConfirmModal" tabindex="-1" aria-labelledby="statusConfirmModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="statusConfirmModalLabel">Confirm Action</h5>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span>&times;</span>
                </button>
                </div>
            <div class="modal-body">
                <p id="status-modal-message"></p>
                <input type="hidden" id="vehicle-id">
                <input type="hidden" id="new-status">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="confirm_status_change">Yes, Continue</button>
            </div>
            </div>
        </div>
        </div>
@stop

@section('js')

    <script type="text/javascript">
        let status_activate = "{{ App\Models\CargoModel::STATUS_ACTIVE }}";
        let status_deactivate = "{{ App\Models\CargoModel::STATUS_DEACTIVE }}";
        $(function() {
            var dataTable = $('.registerBusiness-datatable').DataTable({
                processing: true,
                serverSide: true,
                pageLength: 10,
                searching: false,
                'ajax': {
                    'url': "{{ route('cargo.model') }}",
                    'data': function(data) {
                    }
                },
                columns: [

                    {
                        data: 'name',
                        name: 'name'
                    },            
                    {
                        data: 'brand_name',
                        name: 'brand_name'
                    },
                     {
                        data: 'status',
                        name: 'status'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                ]
            });

        });
          // Activate/Deactivate status
        $(document).on('change', '.toggle-status', function (e) {
            e.preventDefault();
            
            let id = $(this).data('id');
            let isChecked = $(this).is(':checked');
            let newStatus = isChecked ? status_activate : status_deactivate;

            let message = newStatus === status_activate ? "Do you want to activate this Cargo Model?" : "Do you want to deactivate this Cargo Model?";

            // Set data for modal
            $('#vehicle-id').val(id);
            $('#new-status').val(newStatus);
            $('#status-modal-message').text(message);

            // Show modal
            $('#statusConfirmModal').modal('show');

            // Revert the switch temporarily
            $(this).prop('checked', !isChecked);
        });

        $(document).on('click', '#confirm_status_change', function () {
        let id = $('#vehicle-id').val();
        let status = $('#new-status').val();

    // Disable switch temporarily
    let switchInput = $('.toggle-status[data-id="' + id + '"]');
    switchInput.prop('disabled', true);

    $.ajax({
        url: "{{ route('cargo.toggleModelStatus') }}",
        method: "POST",
        data: {
            _token: "{{ csrf_token() }}",
            id: id,
            status: status
        },
        success: function (response) {
            if (response.success) {
                switchInput.prop('checked', status == status_activate);
                $('#status-message')
                    .text(response.message)
                    .removeClass('alert-danger')
                    .addClass('alert alert-success')
                    .show();
            } else {
                $('#status-message')
                    .text(response.message || 'Something went wrong.')
                    .removeClass('alert-success')
                    .addClass('alert alert-danger')
                    .show();
            }

            // Auto-hide message after 3 seconds
            setTimeout(function () {
                $('#status-message').fadeOut();
            }, 3000);
        },
        error: function () {
            $('#status-message')
                .text('Failed to update status.')
                .removeClass('alert-success')
                .addClass('alert alert-danger')
                .show();

            setTimeout(function () {
                $('#status-message').fadeOut();
            }, 5000);
        },
        complete: function () {
            switchInput.prop('disabled', false);
            $('#statusConfirmModal').modal('hide');
        }
    });
});
</script>
@stop