@{
    ViewData["Title"] = "Register Overtime";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<div id="app" class="container mt-4 d-flex justify-content-center">
    <div class="card shadow-sm" style="width: 1100px;">
        <div class="card-body">
            <div class="row">
                @* Left Section *@
                <div class="col-md-7">
                    <div class="mb-3">
                        <label class="form-label">Date</label>
                        <input type="date" class="form-control" v-model="selectedDate">
                    </div>

                    <h6 class="fw-bold">OFFICE HOURS</h6>
                    <div class="row mb-3">
                        <div class="col-4">
                            <label>From</label>
                            <input type="time" class="form-control" v-model="officeFrom">
                        </div>
                        <div class="col-4">
                            <label>To</label>
                            <input type="time" class="form-control" v-model="officeTo">
                        </div>
                        <div class="col-4">
                            <label>Break Hours</label>
                            <input type="time" class="form-control" v-model="officeBreak">
                        </div>
                    </div>

                    <h6 class="fw-bold text-danger">OUTSIDE OFFICE HOURS</h6>
                    <div class="row mb-2">
                        <div class="col-4">
                            <label>From</label>
                            <input type="time" class="form-control" v-model="outsideFrom">
                        </div>
                        <div class="col-4">
                            <label>To</label>
                            <input type="time" class="form-control" v-model="outsideTo">
                        </div>
                        <div class="col-4">
                            <label>Break Hours</label>
                            <input type="time" class="form-control" v-model="outsideBreak">
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="airstationDropdown">Air Station</label>
                        <select id="airstationDropdown" class="form-control" v-model="selectedAirStation">
                            <option v-for="airstation in airstationList" :key="airstation.airstationId" :value="airstation.airstationId">
                                {{ airstation.airstationName }}
                            </option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label>Work Brief Description</label>
                        <textarea class="form-control" v-model="otDescription"></textarea>
                    </div>
                </div>

                @* Right Section *@
                <div class="col-md-5">
                    <label>Day</label>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" v-model="selectedDayType" value="Weekday">
                        <label class="form-check-label">Weekday</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" v-model="selectedDayType" value="Weekend">
                        <label class="form-check-label">Weekend</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" v-model="selectedDayType" value="Public Holiday">
                        <label class="form-check-label">Public Holiday</label>
                    </div>

                    <div class="mb-3 mt-3">
                        <label>Upload File:</label>
                        <input type="file" class="form-control" v-on:change="handleFileUpload">
                        <small class="text-danger">*upload pdf file only</small>
                    </div>

                    <div class="mb-3 d-flex flex-column align-items-center">
                        <label>Total OT Hours</label>
                        <input type="text" class="form-control text-center" v-model="totalOTHours" style="width: 200px;" readonly>
                    </div>

                    <div class="mb-3 d-flex flex-column align-items-center">
                        <label>Total Break Hours</label>
                        <input type="text" class="form-control text-center" v-model="totalBreakHours" style="width: 200px;" readonly>
                    </div>
                </div>
            </div>

            <div class="d-flex justify-content-end mt-3">
                <button class="btn btn-danger" v-on:click="clearForm">Clear</button>
                <button class="btn btn-success ms-3" v-on:click="addOvertime">Save</button>
            </div>
        </div>
    </div>
</div>


@section Scripts {
    <script>
        const app = Vue.createApp({
            data() {
                return {
                   
                };
            },
            computed: {
               
            },
            mounted() {
          
               
            },

            methods: {
                
            }
        });

        app.mount('#app');
    </script>
}