@extends('layouts.admin')

<title>{{ config('app.name', 'Laravel') }} | Admin | Holiday</title>

<style>
    /* The Modal (background) */
    .modal {
        display: none;
        /* Hidden by default */
        position: fixed;
        /* Stay in place */
        z-index: 1;
        /* Sit on top */
        padding-top: 100px;
        /* Location of the box */
        left: 0;
        top: 0;
        width: 100%;
        /* Full width */
        height: 100%;
        /* Full height */
        overflow: auto;
        /* Enable scroll if needed */
        background-color: rgb(0, 0, 0);
        /* Fallback color */
        background-color: rgba(0, 0, 0, 0.4);
        /* Black w/ opacity */
    }

    /* Modal Content */
    .modal-content {
        background-color: #fefefe;
        margin: auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
    }

    /* The Close Button */
    .close {
        color: #aaaaaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }
</style>

@section('main-content')
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="{{asset('assets/css/pop_up_with_image.css')}}"/>

<style>
    .input {
        color: #697a8d;
    }

    #loader {
        text-align: center;
        /* Align the loader to the center */
        margin-left: 15px;
        /* Adjust this value to manage space between loader and button */
        width: auto;
        display: inline-block;
    }

    #loader img {
        width: 30px;
    }

    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-text-fill-color: #697a8d !important;
    }
</style>
<div id="alert" class="col-md-6">
    @if(Session::has('success'))
    <div class="alert alert-primary" role="alert">
        {{Session::get('success')}}
    </div>
    @endif
</div>


<div class="content-wrapper">
    <!-- Content -->
    <div class="container-xxl flex-grow-1 container-p-y">
        <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light"></span> Edit Holidays</h4>
        <!-- Basic Layout -->
        <div class="row" id="person_1">
            <div class="col-xl">
                <div class="mb-2 text-center text-muted fw-bold">
                    Allowed to set holidays for future only. 
                        ( Exception: Last week dates can be chosen in case of emergency. )
                </div>
                <div class="card mb-4">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">Holiday </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12 mb-3">
                                <label class="form-label" for="basic-icon-default-fullname">Name</label>
                                <input type="text" name="name" id="name" placeholder="Holiday Name" class="form-control input form-control-line" minlength="3" maxlength="30" onkeydown="return /[a-zA-Z0-9_\s-]/.test(event.key)" autocomplete="off" value="{{$holiday->name}}">
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-12 mb-3">
                                <label class="form-label" for="basic-icon-default-fullname">Type</label>
                                <select name="holiday_type" id="holiday_type" class="form-control input form-control-line">
                                    <option value="" selected disabled>Select Holiday</option>
                                    <option value="1" {{$holiday->type==1?"selected":""}}>Government</option>
                                    <option value="2" {{$holiday->type==2?"selected":""}}>School</option>
                                </select>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-12 col-md-4 mb-3">
                                <label class="form-label" for="basic-icon-default-email">Start Date</label>
                                <input type="text" placeholder="Start Date" class="form-control input form-control-line bg-white" name="start_date" id="start_date" readonly autocomplete="off" value="{{dateformatter($holiday->start_date)}}">
                            </div>

                            <div class="col-12 col-md-4 mb-3">
                                <label class="form-label" for="basic-icon-default-email">End Date</label>
                                <input type="text" placeholder="End Date" class="form-control input form-control-line bg-white" name="end_date" id="end_date" readonly autocomplete="off"  value="{{dateformatter($holiday->end_date)}}">
                            </div>

                            <div class="col-12 col-md-4 mb-3">
                                <label class="form-label" for="basic-icon-default-email">Duration ( in days )</label>
                                <input type="text" placeholder="Duration" class="form-control input form-control-line" name="duration" id="duration" autocomplete="off" disabled value="{{substr($holiday->duration,0,strrpos($holiday->duration,' '))}}">
                            </div>
                        </div>

                        <div class="row">
                            <div class="mb-3 col-12 col-md-4">
                                <div class="mb-3">
                                    <label class="form-label" for="basic-icon-default-fullname">Image (optional)</label>