@extends('administrative.layouts.main')
@section('title', 'Alerts')
@section('content')
  <x-breadcrumb custom="true">
    <li class="inline-flex items-center">
      <a href="{{ route('administrative.dashboard') }}"
        class="inline-flex items-center text-sm font-medium text-blue-500 hover:text-blue-600">
        <i class="fas fa-home me-1"></i>
        Dashboard
      </a>
    </li>
    <li class="inline-flex items-center">Vehicle Report Data Bulk Export</li>
  </x-breadcrumb>

  <div class="d-flex justify-content-between align-items-center flex-wrap grid-margin">
    <div>
      <h1 class="mb-3 mb-md-0">Location Report Export</h1>
    </div>
  </div>

  <div class="row">
    <div class="col-md-12 grid-margin stretch-card">
      <div class="card">
        <div class="card-body">
          <form action ="{{ route('administrative.locationDataExport') }}" method="POST">
            @csrf
            <div class="d-flex flex-wrap">
              <div class="col-md-4">
                <label for="user_id">User Name</label>
                <select class="form-control select2" id="user_id" name="user_id">
                  <option value="">Select User Name</option>
                  @foreach ($users as $user)
                    <option value="{{ $user->id }}" @if (old('user_id') == $user->id) selected @endif>
                      {{ $user->username }}</option>
                  @endforeach
                </select>
                @error('user_id')
                  <div class="text-danger">{{ $message }}</div>
                @enderror
              </div>
              <div class="col-md-4">
                <label for="date">Date</label>
                <input type="date" value="{{ old('date') }}" class="form-control datepicker" id="date"
                  name="date" placeholder="Date">
                @error('date')
                  <div class="text-danger">{{ $message }}</div>
                @enderror
              </div>
              <div class="col-md-2">
                <label for="start_time">Start Time</label>
                <input type="time" step="1" value="{{ old('start_time', '00:00:00') }}"
                  class="form-control timepicker" id="start_time" name="start_time" placeholder="Start Time">
                @error('start_time')
                  <div class="text-danger">{{ $message }}</div>
                @enderror
              </div>
              <div class="col-md-2">
                <label for="end_time">End Time</label>
                <input type="time" step="1" value="{{ old('end_time', '23:59:59') }}"
                  class="form-control timepicker" id="end_time" name="end_time" placeholder="End Time">
                @error('end_time')
                  <div class="text-danger">{{ $message }}</div>
                @enderror
              </div>
              {{-- <div class="col-md-2">
                                <label for="interval">Interval (in minutes)</label>
                                <input type="number" value="{{old('interval', '5')}}" class="form-control" id="interval" name="interval"
                                    placeholder="Interval">
                                    @error('interval')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div> --}}

              <div class="col-md-2">
                <label for="interval">Interval</label>
                <select class="form-control" id="interval" name="interval">
                  <option value="1" {{ old('interval', '5') == '1' ? 'selected' : '' }}>1 minute
                  </option>
                  <option value="5" {{ old('interval', '5') == '5' ? 'selected' : '' }}>5 minutes
                  </option>
                  <option value="10" {{ old('interval', '5') == '10' ? 'selected' : '' }}>10 minutes
                  </option>
                  <option value="20" {{ old('interval', '5') == '20' ? 'selected' : '' }}>20 minutes
                  </option>
                  <option value="30" {{ old('interval', '5') == '30' ? 'selected' : '' }}>30 minutes
                  </option>
                  <option value="60" {{ old('interval', '5') == '60' ? 'selected' : '' }}>1 hour
                  </option>
                </select>
                @error('interval')
                  <div class="text-danger">{{ $message }}</div>
                @enderror
              </div>

            </div>
            <div class="col-12 text-right mt-3">
              <button type="submit" class="btn btn-primary">Export Data</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>


  {{-- Trip Report --}}


  <div class="d-flex justify-content-between align-items-center flex-wrap grid-margin">
    <div>
      <h4 class="mb-3 mb-md-0">Trip Report Export</h4>
    </div>
  </div>


  <div class="row">
    <div class="col-md-12 grid-margin stretch-card">
      <div class="card">
        <div class="card-body">
          <form action="{{ route('administrative.tripDataExport') }}" method="POST">
            @csrf
            <div class="d-flex flex-wrap">
              <div class="col-md-4">
                <label for="user_id2">User Name</label>
                <select class="form-control select2" id="user_id2" name="user_id">
                  <option value="">Select User Name</option>
                  @foreach ($users as $user)
                    <option value="{{ $user->id }}" @if (old('user_id') == $user->id) selected @endif>
                      {{ $user->username }}
                    </option>
                  @endforeach
                </select>
                @error('user_id')
                  <div class="text-danger">{{ $message }}</div>
                @enderror
              </div>
              <div class="col-md-4">
                <label for="start_date_time">Start Date Time</label>
                <input type="datetime-local" step="1" value="{{ old('start_date_time', date('Y-m-d 00:00:00')) }}"
                  class="form-control" id="start_date_time" name="start_date_time" placeholder="Start Date Time">
                @error('start_date_time')
                  <div class="text-danger">{{ $message }}</div>
                @enderror
              </div>
              <div class="col-md-4">
                <label for="end_date_time">End Time</label>
                <input type="datetime-local" step="1" value="{{ old('end_date_time', date('Y-m-d 23:59:59')) }}"
                  class="form-control" id="end_date_time" name="end_date_time" placeholder="End Date Time">
                @error('end_date_time')
                  <div class="text-danger">{{ $message }}</div>
                @enderror
              </div>

            </div>
            <div class="col-12 text-right mt-3">
              <button type="submit" class="btn btn-primary">Export Data</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>




@endsection

@section('page-js')
  {{-- <script src="path/to/datepicker/js"></script>
    <script src="path/to/timepicker/js"></script> --}}
  <script>
    document.addEventListener('DOMContentLoaded', (event) => {
      let dateInput = document.getElementById('date');
      if (!dateInput.value) {
        let today = new Date();
        let day = String(today.getDate()).padStart(2, '0');
        let month = String(today.getMonth() + 1).padStart(2, '0');
        let year = today.getFullYear();
        dateInput.value = `${year}-${month}-${day}`;
      }
    });
    $(document).ready(function() {
      // $('.datepicker').datepicker({
      //     format: 'yyyy-mm-dd',
      //     autoclose: true,
      //     todayHighlight: true
      // });

      // $('.timepicker').timepicker({
      //     showMeridian: false,
      //     defaultTime: false
      // });

      $('#user_id').select2();
      $('#user_id2').select2();
    });
  </script>
@endsection