<script setup lang="ts">
import MainLayout from "@/Layouts/MainLayout.vue";
import GlassBox from "@/Components/FlightsGoneBy/GlassBox.vue";
import {Head, useForm} from "@inertiajs/vue3";
import AirlineSearchBox from "@/Components/FlightsGoneBy/AirlineSearchBox.vue";
import AircraftSearchBox from "@/Components/FlightsGoneBy/AircraftSearchBox.vue";
import AirportSearchBox from "@/Components/FlightsGoneBy/AirportSearchBox.vue";

defineOptions({ layout: MainLayout });


const props = defineProps<{
    flight: {
        imported_flight_id: number,
        flight_reasons: { value: number, title: string }[]
        flight_classes:{ value: number, title: string }[]
        seat_types: { value: number, title: string }[]
        seat_type: number,
        'flight_class': number,
        'flight_reason': number,
        flight_number: string
        date: string
        registration: string
        seat_number: string
        note: string
        dep_time: string
        arr_time: string
        duration: string
        airline_options: { value: number, title: string, logo_url: string }[]
        from_options:  { value: number, title: string, country_code: string}[]
        to_options:  { value: number, title: string, country_code: string }[]
        aircraft_options:  { value: number, title: string }[]
    }
}>()
const flight = props.flight;

const form = useForm({
    imported_flight_id: flight.imported_flight_id,
    date: flight.date,
    flight_number: flight.flight_number,
    from: flight.from_options[0] ?? null,
    to: flight.to_options[0] ?? null,
    dep_time: flight.dep_time,
    arr_time: flight.arr_time,
    duration: flight.duration,
    airline_id: flight.airline_options[0] ?? null,
    aircraft: flight.aircraft_options[0] ?? null,
    registration: flight.registration,
    seat_number: flight.seat_number,
    seat_type: flight.seat_types.find(s => s.value === flight.seat_type)?.value ?? null,
    flight_class: flight.flight_classes.find(c => c.value === flight.flight_class)?.value ?? null,
    flight_reason: flight.flight_reasons.find(r => r.value === flight.flight_reason)?.value ?? null,
    note: flight.note,

});

const submitForm = useForm({
    imported_flight_id: flight.imported_flight_id,
    date: '' as string | null,
    flight_number: '' as string | null,
    from_id: null as number | null,
    to_id: null as number | null,
    dep_time: '' as string | null,
    arr_time: '' as string | null,
    duration: '' as string | null,
    airline_id: null as number | null,
    aircraft_id: null as number | null,
    registration: '' as string | null,
    seat_number: '' as string | null,
    seat_type_id: null as number | null,
    flight_class_id: null as number | null,
    flight_reason_id: null as number | null,
    note: '' as string | null,
});

function submit() {

    submitForm.imported_flight_id = form.imported_flight_id;
    submitForm.date = form.date;
    submitForm.flight_number = form.flight_number;
    submitForm.from_id = form.from?.value ?? null;
    submitForm.to_id = form.to?.value ?? null;
    submitForm.dep_time = form.dep_time;
    submitForm.arr_time = form.arr_time;
    submitForm.duration = form.duration;
    submitForm.airline_id = form.airline_id?.value ?? null;
    submitForm.aircraft_id = form.aircraft?.value ?? null;
    submitForm.registration = form.registration;
    submitForm.seat_number = form.seat_number;
    submitForm.seat_type_id = form.seat_type;
    submitForm.flight_class_id = form.flight_class;
    submitForm.flight_reason_id = form.flight_reason;
    submitForm.note = form.note;

    submitForm.post(route('import.save'));
}

import { watch } from 'vue'
watch(() => form.flight_reason, (val) => console.log('flight_reason changed:', val))

</script>

<template>
    <Head title="Reconcile"></Head>
    <GlassBox
        :title="flight.flight_number.length > 1 ? 'Reconcile ' + flight.flight_number : 'Reconcile This Flight'"
        blurb="Review and correct your imported flight details before they're saved."
    >

        <v-form style="width: 100%">
            <v-container>

                <!-- Date / Flight Number / Registration -->
                <v-row>
                    <v-col cols="12" md="4">
                        <v-text-field type="date" v-model="form.date" label="Date" placeholder="03-18-11" :error-messages="submitForm.errors.date" />
                    </v-col>
                    <v-col cols="12" md="4">
                        <v-text-field v-model="form.flight_number" label="Flight Number" placeholder="UL227" :error-messages="submitForm.errors.flight_number" />
                    </v-col>
                    <v-col cols="12" md="4">
                        <v-text-field v-model="form.registration" label="Registration" placeholder="4R-ALX" :error-messages="submitForm.errors.registration" />
                    </v-col>
                </v-row>
                <!-- From / To -->
                <v-row>
                    <v-col cols="24" md="12">
                        <AirportSearchBox
                            v-model="form.from"
                            label="From"
                            :prefilled-options="flight.from_options"
                            :error-messages="submitForm.errors.from_id"
                        />
                    </v-col>
                </v-row>
                <v-row>
                    <v-col cols="24" md="12">
                        <AirportSearchBox
                            label="To"
                            v-model="form.to"
                            :prefilled-options="flight.to_options"
                            :error-messages="submitForm.errors.to_id"
                        />
                    </v-col>
                </v-row>

                <!-- Dep time / Arr time / Duration -->
                <v-row>
                    <v-col cols="12" md="4">
                        <v-text-field clearable  v-model="form.dep_time" type="time" label="Departure Time" placeholder="09:30" :error-messages="submitForm.errors.dep_time" />
                    </v-col>
                    <v-col cols="12" md="4">
                        <v-text-field clearable v-model="form.arr_time" type="time" label="Arrival Time" placeholder="11:45" :error-messages="submitForm.errors.arr_time" />
                    </v-col>
                    <v-col cols="12" md="4">
                        <v-text-field v-model="form.duration" label="Duration" placeholder="1:23" :error-messages="submitForm.errors.duration" />
                    </v-col>
                </v-row>

                <!-- Airline / Aircraft -->
                <v-row>
                    <v-col cols="12" md="12">
                        <AirlineSearchBox
                            v-model="form.airline_id"
                            :prefilled-options="flight.airline_options"
                            :error-messages="submitForm.errors.airline_id"
                        />
                    </v-col>
                </v-row>
                <v-row>
                    <v-col cols="12" md="12">
                        <AircraftSearchBox
                            v-model="form.aircraft"
                            :prefilled-options="flight.aircraft_options"
                            :error-messages="submitForm.errors.aircraft_id"
                        />
                    </v-col>
                </v-row>

                <v-row>
                    <v-col cols="12" md="6">
                        <v-select v-model="form.flight_class" label="Class" :items="flight.flight_classes" :error-messages="submitForm.errors.flight_class_id"  />
                    </v-col>
                    <v-col cols="12" md="6">
                        <v-text-field v-model="form.seat_number" label="Seat Number" placeholder="22A" :error-messages="submitForm.errors.seat_number" />
                    </v-col>
                </v-row>

                <v-row>
                    <v-col cols="12" md="6">
                        <v-select v-model="form.seat_type" label="Seat Type" :items="flight.seat_types" :error-messages="submitForm.errors.seat_type_id"  />
                    </v-col>
                    <v-col cols="12" md="6">
                        {{console.log(form.flight_reason)}}
                        <v-select v-model="form.flight_reason" label="Reason" :items="flight.flight_reasons" :error-messages="submitForm.errors.flight_reason_id"  />
                    </v-col>
                </v-row>

                <!-- Note -->
                <v-row>
                    <v-col cols="12">
                        <v-textarea v-model="form.note" label="Note" placeholder="Any additional notes…" :error-messages="submitForm.errors.note" rows="3" auto-grow />
                    </v-col>
                </v-row>

                <v-row>
                    <v-col cols="12" class="d-flex justify-end">
                        <v-btn
                            block
                            size="large"
                            :loading="submitForm.processing"
                            :disabled="submitForm.processing"
                            @click="submit"
                        >
                            <v-progress-circular v-if="submitForm.processing" indeterminate size="24" />
                            <span v-else>Save Flight</span>
                        </v-btn>
                    </v-col>
                </v-row>

            </v-container>
        </v-form>
    </GlassBox>
</template>

<style scoped>
h2 {
    font-size: 2rem;
    text-align: center;
}

p {
    text-align: center;
    width: 100%;
    opacity: 0.7;
    margin-bottom: 1rem;
}
</style>
