@extends('layouts.master')
@section('content')
<div class="card">
    <div class="card-header card-custom-bg d-flex flex-row align-items-center justify-content-between">
        <h5>Transport Route list</h5>
        {{-- <a href="{{ route('transport-route.create') }}" class="btn btn-sm btn-primary">Add New</a> --}}
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#vehicleModal">Create New</button>
    </div>
    <div class="card-body">
        <div class="row ">
            <div class="col-md-12">
                <table class="table" id="myTable">
                    <thead class="thead-light">
                        <tr>
                            <th>Vehicle Number</th>
                            <th>Vehicle Type</th>
                            <th>Capacity</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($vehicles as $vehicle)
                            <tr>
                                <td>{{ $vehicle->vehicle_number }}</td>
                                <td>{{ $vehicle->vehicle_type }}</td>
                                <td>{{ $vehicle->capacity }}</td>
                                <td>
                                    <button type="button" class="btn btn-info" data-toggle="modal" data-target="#vehicleModal"
                                    data-action="edit" data-id="{{ $vehicle->id }}" data-vehicle-number="{{ $vehicle->vehicle_number }}"
                                    data-vehicle-type="{{ $vehicle->vehicle_type }}" data-capacity="{{ $vehicle->capacity }}">Edit</button>
                                    <form action="{{ route('vehicle.destroy', $vehicle->id) }}" method="POST" style="display: inline-block;">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-danger">Delete</button>
                                    </form>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="vehicleModal" tabindex="-1" role="dialog" aria-labelledby="vehicleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="vehicleModalLabel">Create/Edit Vehicle</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="vehicleForm" method="POST">
                    @csrf
                    @method('POST')
                    <div class="form-group">
                        <label for="vehicle_number">Vehicle Number</label>
                        <input type="text" class="form-control" id="vehicle_number" name="vehicle_number" required>
                    </div>
                    <div class="form-group">
                        <label for="vehicle_type">Vehicle Type</label>
                        {{-- <input type="text" class="form-control" id="vehicle_type" name="vehicle_type" required> --}}
                        {{ generateDropdown($vehicle_type, 'class="form-control select2 vehicle_type" id="vehicle_type" name="vehicle_type" required', '', "Select Vehicle Type") }}
                    </div>
                    <div class="form-group">
                        <label for="capacity">Capacity</label>
                        <input type="text" class="form-control" id="capacity" name="capacity" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary" form="vehicleForm">Save Changes</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script type="text/javascript">
    $(document).ready(function() {
        $('#vehicleModal').on('show.bs.modal', function(event) {
            var button = $(event.relatedTarget);
            var action = button.data('action');
            var id = button.data('id');

            var modal = $(this);
            var form = modal.find('form');
            var method = id ? 'PUT' : 'POST';
            modal.find('[name="_method"]').val(method);

            if (action === 'edit') {
                form.attr('action', '/vehicle/update/' + id);
                modal.find('.modal-title').text('Edit Vehicle');
                modal.find('#vehicle_number').val(button.data('vehicle-number'));
                modal.find('#vehicle_type').val(button.data('vehicle-type')).trigger('change');
                modal.find('#capacity').val(button.data('capacity'));
            } else {
                form.attr('action', '{{ route("vehicle.store") }}');
                modal.find('.modal-title').text('Create New Vehicle');
                modal.find('#vehicle_number').val('');
                modal.find('#vehicle_type').val('');
                modal.find('#capacity').val('');
            }
        });
    });
</script>
@endsection