@extends('adminlte::page')

@section('title', 'ORBI Dashboard')

@section('content_header')
    <h1>Vehicle Brand</h1>
    {{-- <small>Manage Vehicle Brand</small> --}}
@stop

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

        <div class="card-body">
            {{-- @if (session('success'))
                <h6 class = 'alert alert-success'>
                    {{ Session('success') }}
                </h6>
            @endif --}}
            <form method="POST" id="search-form" role="form">

                 <div class="row">
                    <div class="col-12">
                        <div class="search_top mb-3">
                            <label for="search" class="mb-0">Search:</label>
                            <x-adminlte-input class="form-control mb-0" id="search_keyword" name="search_keyword"
                                placeholder="Searching....." />
                        </div>
                    </div>
                </div>

                @php
                    $config = [
                        'showDropdowns' => true,
                        'cancelButtonClasses' => 'btn-danger',
                        'locale' => ['format' => 'YYYY/MM/DD'],
                    ];
                @endphp

            </form>
            <table class="table table-bordered vehicle_makes-datatable">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Created Date</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
@stop

@section('js')

    <script type="text/javascript">
        let status_activate = "{{ App\Models\VehicleTypes::STATUS_ACTIVATE }}";
        let status_deactivate = "{{ App\Models\VehicleTypes::STATUS_DEACTIVATE }}";
        $(function() {

            var dataTable = $('.vehicle_makes-datatable').DataTable({
                processing: true,
                serverSide: true,
                pageLength: 10,
                searching: false,
                'ajax': {
                    'url': "{{ route('vehicle_make.index') }}",
                    'data': function(data) {
                        // Read values
                        var search_keyword = $('#search_keyword').val();


                        // Append to data
                        data.search_keyword = search_keyword;

                    }
                },
                columns: [
                    /*{data: 'checkbox', name: 'checkbox', orderable: false, searchable: false},*/
                    /*  {data: 'id', name: 'ID'},  */
                    {
                        data: 'name',
                        name: 'Name'
                    },

                    {
                        data: 'created_at',
                        name: 'Created Date'
                    },
                      {
                        data: 'status',
                        name: 'status'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                ]
            });

            $('#search_keyword').keyup(function() {
                dataTable.draw();
            });

        });

        // 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 Brand?" : "Do you want to deactivate this Brand?";

    // 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);
});

// Confirm button
$(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('vehicle_make.toggleStatus') }}",
        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