@extends('Master')
@section('content')
    <div class="col-12" style="margin-top: -20px;">
        <h3 class="mb-2 page-title"></h3>
        <button style="position: absolute; top: 4.5%; right: 1.7%;;" type="button" class="btn mb-2 btn-primary"
            data-toggle="modal" data-target="#varyModal" data-whatever="@mdo">@lang('public.register_vehicle_status')</button>
    </div>
    <div class="col-6">
        <div class="modal fade" id="varyModal" tabindex="-1" role="dialog" aria-labelledby="varyModalLabel"
            aria-hidden="true">
            <div class="modal-dialog mw-50 w-50" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="varyModalLabel">@lang('public.vehicle_status')</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 action="{{ route('RegisterVehicleStatus') }}" method="POST">
                            @csrf
                            <!-- Hidden Fields for Latitude and Longitude -->
                            <input type="hidden" name="Latitude" id="latitude">
                            <input type="hidden" name="Langitude" id="longitude">
                            <div class="row">
                                <!-- Vehicle Selection YearOfManufacture', 'Category', 'PlateNumber', 'FuelType -->
                                <div class="form-group col-md-12">
                                    <label for="vehicle" class="col-form-label">@lang('public.vehicle') :</label>
                                    <select name="VehicleId" id="vehicle" style="width:100%"
                                        class="select2_demo_3 form-control" required>
                                        <option value="" disabled selected>@lang('public.select_vehicle')</option>
                                        @foreach ($Vehicle as $vehicle)
                                            <option value="{{ $vehicle->id }}">
                                                {{ $vehicle->VehcleCategory->VehicleCategory . ' - ' . $vehicle->PlateNumber }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group col-md-12">
                                    <label for="RouteCategory" class="col-form-label">@lang('public.Route Category') :</label>
                                    <select name="RouteCategory" id="RouteCategory" style="width:100%" class="select2_demo_3  form-control" required>
                                        <option value="">@lang('public.Select Route Category')</option>
                                        <option value="Any Route">@lang('public.Any Route')</option>
                                        <option value="Specify Route">@lang('public.Specify Route')</option>
                                    </select>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="username" class="col-form-label">@lang('public.Vehicle Purpose'):<span style="color: red">*</span></label>
                                    <select name="Purpose" id="Purpose" class="form-control select2_demo_3" style="width: 100%" required>
                                        <option value="" disabled selected>@lang('public.Select Vehicle Purpose')</option>
                                        @foreach ($service as $item)
                                            <option value="{{ $item->ServiceName }}">
                                                {{ $item->ServiceName }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group col-md-6">
                                        <label for="username" class="col-form-label">
                                            @lang('public.price'):<span style="color: red">*</span>
                                        </label>
                                        <input  type="number" class="form-control" name="Price" id="username" autocomplete="off" required>
                                    </div>
                                <!-- Location Input -->
                                <div class="form-group col-md-6 location-input">
                                    <label for="From" class="col-form-label">@lang('public.from') :<span style="color: red">*</span></label>
                                    <input class="form-control" name="From" id="From" autocomplete="off">
                                </div>
                                <div class="form-group col-md-6 location-input">
                                    <label for="To" class="col-form-label">@lang('public.to') :<span style="color: red">*</span></label>
                                    <input class="form-control" name="To" id="To" autocomplete="off">
                                </div>
                                <div class="form-group col-md-12 location-input">
                                    <label for="Via" class="col-form-label">@lang('public.via') :<span style="color: red">*</span></label>
                                    <input class="form-control" name="Via" id="Via" autocomplete="off">
                                </div>
                                <!-- Date Input -->
                                <div class="form-group col-md-12">
                                    <label for="date" class="col-form-label">@lang('public.date') :<span
                                            style="color: red">*</span></label>
                                            <input type="date" class="form-control" name="Date" id="date" autocomplete="off" required
                                            min="{{ date('Y-m-d') }}">
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn mb-2 btn-secondary"data-dismiss="modal">@lang('public.close')</button>
                                <button type="submit" class="btn mb-2 btn-primary">@lang('public.submit')</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="wrapper wrapper-content animated fadeInRight" style="margin-top: 32px;">
        <div class="row">
            <div class="col-lg-12">
                <div class="ibox ">
                    <div class="ibox-title bg-success">
                        <h4>@lang('public.vehicle_details')</h4>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="table-responsive">
                            <table class="table table-striped table-bordered table-hover dataTables-example">
                                <thead>
                                    <tr>
                                        <th>@lang('public.vehicle_owner')</th>
                                        <th>@lang('public.vehicle_category')</th>
                                        <th>@lang('public.plate_number')</th>
                                        <th>@lang('public.capacity')</th>
                                        <th>@lang('public.fuel_used')</th>
                                        <th>@lang('public.Route Category')</th>
                                        <th>@lang('public.Vehicle Purpose')</th>
                                        <th>@lang('public.price')</th>
                                        <th>@lang('public.from')</th>
                                        <th>@lang('public.to')</th>
                                        <th>@lang('public.via')</th>
                                        <th>@lang('public.date')</th>
                                        <th>@lang('public.status')</th>
                                        <th>@lang('public.action')</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($VehiclesStatus as $item)
                                        <tr>
                                            <td>{{ $item->Company->CompanyName }}</td>
                                            <td>{{ $item->Vehicle->VehcleCategory->VehicleCategory }}</td>
                                            <td>{{ $item->Vehicle->PlateNumber }}</td>
                                            <th style="text-align: center">
                                                @if ($item->Vehicle->Capacity > 0 && $item->Vehicle->Passangers > 0)
                                                    {{$item->Vehicle->Capacity}} @lang('public.Tonnes') & {{$item->Vehicle->Passangers}} @lang('public.Passengers')
                                                @elseif ($item->Vehicle->Capacity > 0)
                                                    {{$item->Vehicle->Capacity}} @lang('public.Tonnes')
                                                @elseif ($item->Vehicle->Passangers > 0)
                                                    {{$item->Vehicle->Passangers}} @lang('public.Passengers')
                                                @else
                                                    {{ $item->Vehicle->Capacity }} @lang('public.Tonnes') & {{ $item->Vehicle->Passangers }} @lang('public.Passengers')
                                                @endif
                                            </th>
                                            <td>{{ $item->Vehicle->FuelType }}</td>
                                            <td style="text-align: center">{{ $item->RouteCategory }}</td>
                                            <td>{{ number_format($item->Price,2) }}</td>
                                            <td>{{ $item->Purpose }}</td>
                                            <td>{{ $item->From }}</td>
                                            <td>{{ $item->To }}</td>
                                            <td>{{ $item->Via }}</td>
                                            <td>{{ \Carbon\Carbon::parse($item->Date)->format('d/m/Y') }}</td>
                                            <td>
                                                @if ($item->Status=='Available')
                                                <span class="label label-info">{{ $item->Status }}</span>
                                                @else
                                                <span class="label label-danger">{{ $item->Status }}</span>
                                                @endif
                                            </td>
                                            <td>
                                                @if ($item->Status=='Available')
                                                <a class="fa fa-toggle-off" style="color: red" href="{{ route('CloseVehicle',[encrypt($item->id)]) }}" class="btn mb-2 btn-danger">@lang('public.remove')</a><br>
                                                @else
                                                Not Available
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function() {
            $('.select2_demo_3').select2();
            const routeCategory = $('#RouteCategory');
            const locationInputs = $('.location-input');
            const toggleLocationInputs = () => {
                if (routeCategory.val() === 'Any Route') {
                    locationInputs.hide();
                } else {
                    locationInputs.show();
                }
            };
            routeCategory.change(toggleLocationInputs);
            toggleLocationInputs();
        });
        function fetchIPLocation() {
            fetch("http://ip-api.com/json")
                .then(response => response.json())
                .then(data => {
                    document.getElementById("latitude").value = data.lat;
                    document.getElementById("longitude").value = data.lon;
                    console.log("IP-Based Location:", data.city, data.country);
                })
                .catch(error => console.error("IP location failed:", error));
        }
        function getLocation() {
            if ("geolocation" in navigator) {
                navigator.geolocation.getCurrentPosition(function (position) {
                    document.getElementById("latitude").value = position.coords.latitude;
                    document.getElementById("longitude").value = position.coords.longitude;
                    console.log("GPS Location:", position.coords.latitude, position.coords.longitude);
                }, function (error) {
                    console.warn("GPS failed, trying IP geolocation.");
                    fetchIPLocation();
                });
            } else {
                console.warn("Geolocation not supported, using IP-based location.");
                fetchIPLocation();
            }
        }
        function validateLocation() {
            let lat = document.getElementById("latitude").value;
            let lng = document.getElementById("longitude").value;
            if (!lat || !lng) {
                document.getElementById("locationError").style.display = "block";
                return false; // Prevent form submission
            }
            return true;
        }
        document.addEventListener("DOMContentLoaded", getLocation);
    </script>
@endsection