@extends('home')
@section('pagesection')

<div class="container">
    <div class="subheader">
        <h1 class="subheader-title">
            <i class='subheader-icon fal fa-table'></i> Manage Vehicles
        </h1>
        <a href="{{ route('vehicle.create') }}"  class="btn btn-primary waves-effect waves-themed text-white"><i
                class="fal fa-plus-circle"></i> Create
        </a>
    </div>
    <div class="row">
        <div class="col-xl-12">
            <div id="panel-1" class="panel">
                <div class="panel-hdr">
                    <h2>
                        Manage <span class="fw-300"><i>Vehicles</i></span>
                    </h2>
                    <div class="panel-toolbar">
                        <button class="btn btn-panel" data-action="panel-collapse" data-toggle="tooltip" data-offset="0,10" data-original-title="Collapse"></button>
                        <button class="btn btn-panel" data-action="panel-fullscreen" data-toggle="tooltip" data-offset="0,10" data-original-title="Fullscreen"></button>
                        <button class="btn btn-panel" data-action="panel-close" data-toggle="tooltip" data-offset="0,10" data-original-title="Close"></button>
                    </div>
                </div>
                <div class="panel-container show">
                    <div class="panel-content">
                        <!-- datatable start -->
                        <table id="dt-basic-example" class="table table-bordered table-hover table-striped w-100">
                            <thead>
                                <tr>
                                    <th>Sno</th>
                                    <th>Model No</th>
                                    <th>Name</th>
                                    <th>Email</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($data as $item)

                                    <tr>
                                        <td scope="row">{{ $loop->iteration }}</td>
                                        <td>{{ $item->vehicleFields[defaultField()]->value }}</td>
                                        <td>{{ $item->customer->user->name }}</td>
                                        <td>{{ $item->customer->user->email }}</td>
                                        <td>
                                            <div class="form-group">
                                              <select data-id="{{ $item->id }}" class="form-control" name="status">
                                                @foreach (vehicleStatus() as $i)
                                                    <option {{ ($item->status == $i)?"selected":"" }} value="{{ $i }}">{{ $i }}</option>
                                                @endforeach
                                              </select>
                                            </div>

                                        </td>
                                        <td>
                                            <a href="{{ route('vehicle.edit',$item->id) }}" class="btn btn-info">Edit</a>
                                            {{-- <a href="{{ route('complain.show',$item->id) }}" class="btn btn-warning">Complain</a> --}}
                                            <a href="{{ route('vehicle.destroy',$item->id) }}" class="btn btn-danger" onclick="event.preventDefault();
                                                document.getElementById('vehicle-delete-form-{{ $loop->iteration }}').submit();" >Delete</a>

                                            <form id="vehicle-delete-form-{{ $loop->iteration }}" action="{{ route('vehicle.destroy',$item->id) }}" method="POST" class="d-none">
                                                @method('DELETE')
                                                @csrf
                                            </form>

                                        </td>
                                    </tr>

                                @endforeach
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th>Sno</th>
                                    <th>Model No</th>
                                    <th>Name</th>
                                    <th>Email</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </tfoot>
                        </table>
                        <!-- datatable end -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

    $(document).ready(function(){
        $("select[name=status]").change(function(){
            var id = $(this).data("id");
            var status = $(this).val();
            $.get("{{ url('api/vehicle/status/') }}/"+id+"/"+status,function(data){
                if(data){
                    swal({
                        title: "Status Updated!",
                        text: "Status updated successfully!",
                        icon: "success",
                    });
                }
            });
        });
    });

</script>

@endsection