@extends('layouts.app')

@section('content')
<style>
    .datepicker{
        width: 100%;
    }
    .ui-datepicker-trigger {
        left: 190px;
        top: -36px;
    }
</style>
<div class="margin-top-bottom textlabel">
    <h2>Holiday List</h2>
</div>
<div class="margin-top-bottom">
    <a href="{{route('holiday')}}" class="TestCallBTN">Holiday List</a>
</div>
<div class="row maintenance-device-list-cont">
    <div class="col-md-4"></div>
    <div class="col-md-4">
     <form action="{{route('store')}}" method="post" >
        @csrf
        <div class="form-group">
            <label for="email">Holiday Name</label>
            <input type="text" class="form-control" id="holiday_name" name="holiday_name" placeholder="Holiday name">
            @error('holiday_name')
                <div class="alert alert-danger">{{ $message }}</div>
            @enderror
        </div>
        <div class="form-group">
            <label for="pwd">Holiday Date</label><br>
            <input type="text" class="input-date datepicker" id="holiday_date" name="holiday_date" placeholder="Holiday Date" autocomplete="off" />
            @error('holiday_date')
                <div class="alert alert-danger">{{ $message }}</div>
            @enderror
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
    </form>
</div>
<div class="col-md-4"></div>
</div>
<script>
    /*************************added by 1206 *******************/
    $( function() {
        $( ".datepicker" ).datepicker({
                dateFormat: 'DD,yy-mm-dd',
                //maxDate: 0,
                minDate: 'today',
                showOn: "button",
                    buttonImage: "{{env('WP_URL')}}/wp-content/uploads/2022/07/Calender-blue-1.png",
                    buttonImageOnly: true
            });
    });
    </script>
@endsection