@extends('layouts.master')

@section('content')
<div class="container-xxl py-3">
    <div class="row justify-content-center">
        <div class="col-md-5">
            <div class="text-center">
                <p class="mb-0">Formulir Tambah </p>
                <h3 class="fw-bolder">Laporan</h3>
            </div>
            <form id="form" method="GET" action="{{ route('reports.show', ['type' => 'show']) }}">
                <div class="card shadow mb-2">
                    <div class="card-body">
                        <div class="form-floating mb-3">
                            <select id="imei" class="form-select @error('imei') is-invalid @enderror" name="imei" placeholder="Pilih Kendaraan">
                                <option value="">Semua</option>
                                @foreach ($vehicles as $vehicle)
                                <option value="{{ (int)$vehicle->imei }}">{{ $vehicle->gps_name }}</option>
                                @endforeach
                            </select>
                            <label for="imei">Kendaraan</label>
                            @error('imei')
                            <div class="invalid-feedback" role="alert">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="form-floating mb-3">
                            <select id="report_type" class="form-select @error('name') is-invalid @enderror" name="report_type" placeholder="Pilih Jenis Laporan">
                                <option value="report-history">Riwayat</option>
                                <option value="report-speed">Kecepatan</option>
                                <option value="report-park">Parkir</option>
                                <option value="report-summary">Ringkasan</option>
                                <option value="report-convenient">Mudah</option>
                            </select>
                            <label for="report_type">Jenis Laporan</label>
                            @error('report_type')
                            <div class="invalid-feedback" role="alert">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="row">
                            <div class="col-6">
                                <div class="form-floating mb-3">
                                    <input id="start_time" type="start_time" class="form-control @error('start_time') is-invalid @enderror" name="start_time" placeholder="Dari Tanggal" value="{{ date('Y-m-d 00:00:00') }}"/>
                                    <label for="start_time">Dari Tanggal</label>
                                    @error('start_time')
                                    <div class="invalid-feedback" role="alert">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-floating mb-3">
                                    <input id="end_time" type="end_time" class="form-control @error('end_time') is-invalid @enderror" name="end_time" placeholder="Sampai Tanggal"  value="{{ date('Y-m-d 23:59:00') }}"/>
                                    <label for="end_time">Dari Tanggal</label>
                                    @error('end_time')
                                    <div class="invalid-feedback" role="alert">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="d-flex justify-content-between">
                    <a href="{{ route('reports.index') }}" class="btn btn-light"><i class="fa-solid fa-fw fa-arrow-left"></i> Kembali</a>
                    <button type="submit" class="btn btn-primary"><i class="fa-regular fa-fw fa-save"></i> Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('css')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
@endpush

@push('js')
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://npmcdn.com/flatpickr/dist/l10n/id.js"></script>
<script>
$(()=>{
    'use strict';
    $(`[name="start_time"]`).flatpickr({
        locale: "id",
        enableTime: true,
        altInput: true,
        altFormat: "d F Y H:i:00",
        dateFormat: "Y-m-d H:i:00",
    });
    $(`[name="end_time"]`).flatpickr({
        locale: "id",
        enableTime: true,
        altInput: true,
        altFormat: "d F Y H:i:00",
        dateFormat: "Y-m-d H:i:00",
    });
});
</script>
@endpush