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

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<div class="container">
    <div class="row justify-content-center">
        <div class="col-6 col-md-6 col-lg-3">
            <div class="card card-hover">
                <a asp-area="OTcalculate" asp-controller="HrDashboard" asp-action="Rate">
                    <div class="box bg-success text-center">
                        <h1 class="font-light text-white">
                            <i class="mdi mdi-currency-usd"></i>
                        </h1>
                        <h6 class="text-white">Rate</h6>
                    </div>
                </a>
            </div>
        </div>

        <div class="col-6 col-md-6 col-lg-3">
            <div class="card card-hover">
                <a asp-area="OTcalculate" asp-controller="HrDashboard" asp-action="Calendar">
                    <div class="box bg-purple text-center">
                        <h1 class="font-light text-white">
                            <i class="mdi mdi-calendar"></i>
                        </h1>
                        <h6 class="text-white">Calendar</h6>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>


<div id="calendarApp">
    <div class="row">
        @* Holiday *@
        <div class="col-md-6">
            <div class="card">
                <div class="card-header bg-purple text-white">
                    <h4 class="text-center">UPDATE HOLIDAY</h4>
                </div>
                <div class="card-body">
                    <label>Date:</label>
                    <input type="date" v-model="holidayDate" class="form-control">

                    <label>State:</label>
                    <div class="form-group">
                        <div v-for="state in states" class="form-check">
                            <input type="checkbox" class="form-check-input" :id="state" :value="state" v-model="selectedStates">
                            <label class="form-check-label" :for="state">{{ state }}</label>
                        </div>
                    </div>

                    <label>Holiday:</label>
                    <input type="text" v-model="holidayName" class="form-control" placeholder="Enter Holiday Name">

                    <div class="mt-3 text-right">
                        <button class="btn btn-danger" >Clear</button>
                        <button class="btn btn-success" >Save</button>
                    </div>
                </div>
            </div>
        </div>

        @* Weekend *@
        <div class="col-md-6">
            <div class="card">
                <div class="card-header bg-purple text-white">
                    <h4 class="text-center">UPDATE WEEKEND</h4>
                </div>
                <div class="card-body">
                    <label>State:</label>
                    <div class="form-group">
                        <div v-for="state in states" class="form-check">
                            <input type="checkbox" class="form-check-input" :id="'weekend_' + state" :value="state" v-model="selectedWeekendStates">
                            <label class="form-check-label" :for="'weekend_' + state">{{ state }}</label>
                        </div>
                    </div>

                    <label>Days:</label>
                    <select v-model="selectedWeekend" class="form-control">
                        <option>Friday & Saturday</option>
                        <option>Saturday & Sunday</option>
                    </select>

                    <div class="mt-3 text-right">
                        <button class="btn btn-danger" >Clear</button>
                        <button class="btn btn-success" >Save</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @* Updated Data*@
    <div class="row mt-4">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h4>Holiday Updates</h4>
                </div>
                <div class="card-body">
                    <ul class="mt-3">
                        <li v-for="holiday in holidays">
                            <strong>{{ holiday.Date }}</strong>: {{ holiday.HolidayName }} ({{ holiday.States.join(', ') }})
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h4>Weekend Updates</h4>
                </div>
                <div class="card-body">
                    <ul>
                        <li v-for="weekend in weekends">
                            <strong>{{ weekend.States.join(', ') }}</strong>: {{ weekend.WeekendDays }}
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>