@extends('administrative.layouts.master')
@section('page-css')
    <script
        src="https://cdn.jsdelivr.net/npm/@iconscout/unicons@4.0.8/script/monochrome/bundle.min.js
                                                                                                                                                                                ">
    </script>
    <link href="
https://cdn.jsdelivr.net/npm/@iconscout/unicons@4.0.8/css/line.min.css
" rel="stylesheet">
    <script src="https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js"></script>

    <style>
        .select2-container--default .select2-selection--single {
            height: 40px !important;
        }

        .navbar{
            position: absolute;
        }
      
        .car-icon {
            font-size: 90px;
            color: red;
        }

        .bst-icon {
            font-size: 90px;
            color: blue;
        }

        .v4-icon {
            font-size: 90px;
            color: green;
        }
    </style>
@endsection
@section('content')

    <nav class="page-breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('administrative.dashboard') }}">Dashboard</a></li>
            @php
                $link = url('/');
            @endphp

            @foreach (request()->segments() as $segment)
                @php
                    $link .= '/' . request()->segment($loop->iteration);
                @endphp
                @if (rtrim(request()->route()->getPrefix(), '/') != $segment && !preg_match('/[0-9]/', $segment))
                    @if ($loop->last)
                        <li class="breadcrumb-item {{ $loop->last ? 'active' : '' }}"
                            {{ $loop->last ? 'aria-current="page"' : '' }}>
                            @if ($loop->last)
                                {{ $segment }}
                            @else
                                <a href="{{ $link }}">{{ $segment }}</a>
                            @endif
                        </li>
                    @endif
                @endif
            @endforeach
        </ol>
    </nav>

    <div class="row pt-4">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <h6 class="card-title">Delete vehicle using customer id</h6>
                    <form method="GET">
                        @csrf
                        <div class="form-group input-option">
                            <label for="customer-id">Customer Id <span class="text-danger">*</span></label>
                            <input type="text" id="customer-id" name="customer_id" class="w-100 form-control">
                            <div class="d-none validation-message">
                                <span class="text-danger">Please enter customer id</span>
                            </div>
                        </div>
                        <button type="button" class="btn btn-danger mr-2" id="delete-button">Delete Vehicle</button>
                        {{-- success and error msg will be shown here --}}
                        <h6 class="mt-4" id="message-show"></h6>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('page-js')
    <script>
        $(document).on('click', '#delete-button', function() {
            var customerId = $('#customer-id').val();
            if ($("#customer-id").val() == '') {
                $(".validation-message").removeClass('d-none');
            } else {
                $(".validation-message").addClass('d-none');
            }
            $.ajax({
                url: 'delete_vehicle/' + customerId,
                method: 'get',
                headers: {
                    'Authorization': 'Bearer PlwgxGXknZHsltfev0c3lf4KfeYT0nTCfqOvoYot'
                },
                dataType: 'json',
                success: function(response) {
                    if (response.success == 1) {
                        $('#message-show').removeClass('text-danger').addClass('text-success').html(
                            'Customer vehicle deleted successfully');
                        // Additional code to handle UI changes if necessary
                    }
                },
                error: function(xhr, status, error) {
                    $('#message-show').addClass('text-danger').html(xhr.responseText);
                    console.error(xhr.responseText);
                    // Additional error handling code
                }
            });

        });
    </script>
@endsection