@extends('supervisor.layouts.app')
@section('panel')
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body p-0">
                    <div class="table-responsive--md  table-responsive">
                        <table class="table table--light style--two">
                            <thead>
                                <tr>
                                    <th>@lang('Trip')</th>
                                    <th>@lang('Driver')</th>
                                    <th>@lang('Departure')</th>
                                    <th>@lang('Arrival')</th>
                                    <th>@lang('Duration')</th>
                                    <th>@lang('Status')</th>
                                    <th>@lang('Action')</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($trips as $trip)
                                    @php
                                        $date = Carbon\Carbon::parse($trip->start_time);
                                        $now = Carbon\Carbon::parse($trip->expected_end_time);
                                        $diff = $date->diff($now);
                                    @endphp
                                    <tr>
                                        <td>
                                            {{ $trip->title }}
                                            <br>
                                            <span class="fw-bold"><i class="la la-bus"></i>
                                                @if ($trip->vehicle)
                                                    {{ __($trip?->vehicle?->vehicle_no) }} ({{ __($trip?->vehicle?->register_no) }})
                                                @else
                                                    <span class="text--warning small"><small>@lang('Not Assign')</small>
                                                @endif
                                            </span>
                                        </td>
                                        <td>
                                            @if($trip->driver ?? NULL)
                                                <small class="cursor-pointer driverSupervisorInfo"
                                                data-name="{{ __($trip?->driver?->fullname) }}"
                                                data-mobile="({{ __($trip?->driver?->dial_code) }}) {{ __($trip?->driver?->mobile) }}"
                                                data-image="{{ getImage(getFilePath('driver') . '/' . $trip?->driver?->image, getFileSize('driver')) }}"
                                                data-trip="{{ __($trip->title) }}" data-vehicle="{{ __(($trip?->vehicle)? $trip?->vehicle?->vehicle_no.'('.$trip?->vehicle?->register_no.')' : 'Not Assign') }}"
                                                data-title="@lang('Driver Information')">
                                                    <span class="text--info">{{ __($trip?->driver?->fullname) }}</span>
                                                </small>
                                            @else
                                                <small class="text--warning">@lang('Not Assign')</small>
                                            @endif
                                        </td>
                                        <td>
                                            {{ showDateTime($trip->start_time, 'h:i A') }}
                                            <br>
                                            {{ $trip?->startingPoint?->name }}
                                        </td>
                                        <td>
                                            {{ showDateTime($trip->expected_end_time, 'h:i A') }}
                                            <br>
                                            {{ $trip?->destinationPoint?->name }}
                                        </td>
                                        @if ($diff->i > 0)
                                            <td>{{ $diff->format('%h Hours %i minutes') }}
                                            </td>
                                        @else
                                            <td>{{ $diff->format('%h Hours') }}</td>
                                        @endif
                                        <td>@php echo $trip->statusBadge; @endphp</td>
                                        <td>
                                            <a href="{{ route('supervisor.trips.view', $trip->id) }}"
                                                class="btn btn-outline--primary btn-sm">
                                                <i class="la la-desktop"></i> @lang('Details')
                                            </a>
                                            <button type="button"
                                                class="btn btn-sm btn-outline--primary statusBtn"
                                                data-id="{{ $trip->id }}"
                                                data-status="{{ $trip->status }}"
                                                data-cancel-reason="{{ $trip->cancel_reason }}"
                                                data-end-time="{{ $trip->end_time }}"
                                                data-running-time="{{ $trip->running_time }}"
                                                data-trip="{{ __($trip->title) }}"
                                                data-vehicle="{{ __($trip?->vehicle?->vehicle_no) }} ({{ __($trip?->vehicle?->register_no) }})">
                                                <i class="la la-retweet"></i>@lang('Status')
                                            </button>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td class="text-muted text-center" colspan="100%">{{ __($emptyMessage) }}</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
                @if ($trips->hasPages())
                    <div class="card-footer py-4">
                        {{ paginateLinks($trips) }}
                    </div>
                @endif
            </div>
        </div>
    </div>

    <div id="statusModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">@lang('Update Status')</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <i class="las la-times"></i>
                    </button>
                </div>
                <form method="POST" method="post" action="">
                    @csrf
                    <div class="modal-body">
                        <div class="form-group">
                            <small class="fw-bold text-muted trip"></small>
                            <br>
                            <i class="la la-bus"></i> <span class="vehicle"></span>
                        </div>
                        <div class="form-group">
                            <label>@lang('Status')</label>
                            <select class="form-control select2 status" name="status" data-minimum-results-for-search="-1" required>
                                <option value="">@lang('Select One')</option>
                                <option value="{{ Status::TRIP_RUNNING }}" >@lang('Running')</option>
                                <option value="{{ Status::TRIP_COMPLETED }}" >@lang('Completed')</option>
                            </select>
                        </div>
                        <div class="form-group statusTime">
                            <label> @lang('End Time')</label>
                            <input type="search" name="" class="form-control date-range-single" autocomplete="off" required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn--dark" data-bs-dismiss="modal">@lang('Cancel')</button>
                        <button type="submit" class="btn btn--primary">@lang('Submit')</button>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <div class="modal fade" id="driverSupervisorInfo" tabindex="-1" aria-labelledby="driverSupervisorInfoLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h1 class="modal-title fs-5" id="driverSupervisorInfoLabel"></h1>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12 text-center">
                        <div class="col-md-4 col-sm-4 col-6 text-center mx-auto">
                            <img class="image rounded-circle border border-1" src="" alt="@lang('image')">
                        </div>
                        <p class="name fw-bold my-2"></p>
                        <p class="fw-bold"><i class="las la-phone-alt"></i><span class="mobile"></span></p>
                        <p class="fw-bold text-muted trip text-start"></p>
                        <p class="text-start">
                            <i class="la la-bus"></i>
                            <span class="vehicle"></span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">@lang('Close')</button>
            </div>
          </div>
        </div>
    </div>
@endsection

@push('breadcrumb-plugins')
    <x-search-date-field />
@endpush

@push('script-lib')
    <script src="{{ asset('assets/global/js/moment.min.js') }}"></script>
    <script src="{{ asset('assets/global/js/daterangepicker.min.js') }}"></script>
    <script src="{{ asset('assets/admin/js/cu-modal.js') }}"></script>
@endpush

@push('style-lib')
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/global/css/daterangepicker.css') }}">
@endpush

@push('script')
    <script>
        (function($) {
            "use strict"

            $('.driverSupervisorInfo').on('click', function () {
                var modal = $('#driverSupervisorInfo');
                modal.find('.modal-title').text($(this).data('title'));
                modal.find('.modal-body .name').text($(this).data('name'));
                modal.find('.modal-body .mobile').text($(this).data('mobile'));
                modal.find('.modal-body .trip').text($(this).data('trip'));
                modal.find('.modal-body .vehicle').text($(this).data('vehicle'));
                modal.find('.modal-body .image').attr('src', $(this).data('image'));
                modal.modal('show');
            });

            const datePicker = $('.date-range').daterangepicker({
                autoUpdateInput: false,
                locale: {
                    cancelLabel: 'Clear',
                    format: 'MMMM DD, YYYY'
                },
                showDropdowns: true,
            });

            const changeDatePickerText = (event, startDate, endDate) => {
                $(event.target).val(`${startDate.format('MMMM DD, YYYY')} - ${endDate.format('MMMM DD, YYYY')}`);
            }

            $('.date-range').on('apply.daterangepicker', (event, picker) => {
                changeDatePickerText(event, picker.startDate, picker.endDate);
            });

            $('.date-range').on('cancel.daterangepicker', (event) => {
                $(event.target).val('');
            });
            $('.resetBtn').on('click', function() {
                $('#status, #driver_id, #supervisor_id, #vehicle_id').val('').trigger('change');
            });

            $('.statusBtn').on('click', function () {
                const modal = $('#statusModal');
                let id = $(this).data('id');
                let status = $(this).data('status');
                let trip = $(this).data('trip');
                let vehicle = $(this).data('vehicle');
                let cancelReason = $(this).data('cancel-reason');
                let time = '';
                status = (status == '{{ Status::TRIP_INITIATED }}') ? '' : status;
                modal.find('form').attr('action', `{{ url('supervisor/trip/status') }}/`+id);
                modal.find('.trip').text(trip);
                modal.find('.vehicle').text(vehicle);
                modal.find('.status').val(status).trigger('change');
                modal.find('.cancel_reason').val(cancelReason);
                modal.modal('show');
                if(status == '{{ Status::TRIP_COMPLETED }}') {
                    time = $(this).data('end-time');
                }
                if(status == '{{ Status::TRIP_RUNNING }}') {
                    time = $(this).data('running-time');
                }
                statusTime(time, cancelReason);
            });

            $('.status').on('change', function() {
                $('#statusModal').find('.date-range-single').val('');
                statusTime();
            });

            function statusTime(time = moment().format('YYYY-MM-DD H:mm')) {
                const modal = $('#statusModal');
                const status = modal.find('.status').val();
                const date = modal.find('.date-range-single');
                const label = modal.find('.statusTime').find('label');
                let required = false;
                let name = '';
                let lableText = ''
                let cancelRequired = false;
                $('.statusTime').addClass('d-none');
                if(status == '{{ Status::TRIP_COMPLETED }}') {
                    $('.statusTime').removeClass('d-none');
                    lableText = `@lang('End Time')`;
                    required = true;
                    name = 'end_time';
                }else if(status == '{{ Status::TRIP_RUNNING }}') {
                    $('.statusTime').removeClass('d-none');
                    lableText = `@lang('Running Time')`;
                    required = true;
                    name = 'running_time';
                }
                label.text(lableText);
                date.prop('required', required).val(time).attr('name', name);
            }

            const singleDatePicker = $('.date-range-single').daterangepicker({
                singleDatePicker: true,
                autoUpdateInput: false,
                locale: {
                    cancelLabel: 'Clear',
                    format: 'YYYY-MM-DD H:mm'
                },
                showDropdowns: true,
                timePicker: true,
                timePicker24Hour: true,
                timePickerIncrement: 1
            });

            const changeSingleDatePickerText = (event, selectedDate) => {
                $(event.target).val(selectedDate.format('YYYY-MM-DD H:mm'));
            };

            $('.date-range-single').on('apply.daterangepicker', (event, picker) => {
                changeSingleDatePickerText(event, picker.startDate);
            });

            if ($('.date-range-single').val()) {
                let selectedDate = $('.date-range-single').val();
                $('.date-range-single').data('daterangepicker').setStartDate(new Date(selectedDate));
            }


        })(jQuery)
    </script>
@endpush
