@section('title', 'Add Availability')
@extends('vetdoctor.layouts.app')

<!-- Parsley CSS -->
@push('style')
<link rel="stylesheet" href="{{asset('admin/assets/css/main.css')}}">
<link rel="stylesheet" href="{{asset('admin/assets/css/color_skins.css')}}">
<!-- Timepicker Js -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-timepicker/jquery.timepicker.min.css">


@endpush


@section('content')
<section class="content home">
    <div class="block-header">
        <!-- Start Content-->
        <div class="container-fluid">
            <div class="body">

                <div class="row">
                    <div class="col-lg-12 mt-3 mb-3">
                        <h2 class="text-center">{{!empty($availabilityDetails) ? 'EDIT' : 'SET'}} AVAILABILITY</h2>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">

                                @if(empty($availabilityDetails))
                                <form class="form" name="setAvailability" id="setAvailability" method="post" action="{{route('vetdoctor-store_availability')}}" enctype="multipart/form-data">
                                    @else
                                    <form class="form" name="updateAvailability" id="updateAvailability" method="post" action="{{ route('vetdoctor-update_availability', $availabilityDetails->id) }}" enctype="multipart/form-data">
                                        @method('PUT')
                                        @endif

                                        @csrf

                                        <input type="hidden" name="availability_id" id="availability_id" value="{{ $availabilityDetails->id ?? ''}}">


                                        <div class="form-group form-float col-lg-5">
                                            <b>Day</b>
                                            <select id="day_of_week" name="day_of_week" class="form-control">
                                                <option value=""></option>
                                                <option value="Mon" {{ isset($availabilityDetails) && $availabilityDetails->day_of_week == 'Mon' ? 'selected' : '' }}>Monday</option>
                                                <option value="Tue" {{ isset($availabilityDetails) && $availabilityDetails->day_of_week == 'Tue' ? 'selected' : '' }}>Tuesday</option>
                                                <option value="Wed" {{ isset($availabilityDetails) && $availabilityDetails->day_of_week == 'Wed' ? 'selected' : '' }}>Wednesday</option>
                                                <option value="Thu" {{ isset($availabilityDetails) && $availabilityDetails->day_of_week == 'Thu' ? 'selected' : '' }}>Thursday</option>
                                                <option value="Fri" {{ isset($availabilityDetails) && $availabilityDetails->day_of_week == 'Fri' ? 'selected' : '' }}>Friday</option>
                                                <option value="Sat" {{ isset($availabilityDetails) && $availabilityDetails->day_of_week == 'Sat' ? 'selected' : '' }}>Saturday</option>
                                                <option value="Sun" {{ isset($availabilityDetails) && $availabilityDetails->day_of_week == 'Sun' ? 'selected' : '' }}>Sunday</option>
                                            </select>
                                        </div>


                                        <div class="form-group form-float col-lg-5"> <b>Start Time</b>
                                            <div class="form-line">
                                                <input type="time" name="start_time" id="start_time" class="form-control" value="{{ isset($availabilityDetails) ? $availabilityDetails->start_time : '' }}">
                                            </div>
                                        </div>


                                        <div class="form-group form-float col-lg-5"> <b>End Time</b>
                                            <div class="form-line">
                                                <input type="time" name="end_time" id="end_time" class="form-control" value="{{ isset($availabilityDetails) ? $availabilityDetails->end_time : '' }}">
                                            </div>
                                        </div>

                                        <div class="form-group col-lg-2">
                                            <b>Off Day</b>
                                            <div class="checkbox mt-2">
                                                <input type="hidden" name="is_off_day" value="0">
                                                <input type="checkbox" id="is_off_day" name="is_off_day" value="1" {{ isset($availabilityDetails) && $availabilityDetails->is_off_day ? 'checked' : '' }}>
                                                <label for="is_off_day">Off Day</label>
                                            </div>
                                        </div>



                                        <div>
                                            @if(empty($availabilityDetails))
                                            <input type="submit" class="btn btn-success" class="add_speciality" value="Add">
                                            @else
                                            <input type="submit" class="btn btn-success" class="update_speciality" value="Update">
                                            @endif
                                        </div>
                                    </form>
                                </form>

                            </div>
                        </div> <!-- end card-->
                    </div> <!-- end col-->
                </div>

            </div>
        </div>
    </div>
</section>

@endsection

@push('script')
<script src="{{asset('admin/assets/bundles/libscripts.bundle.js')}}"></script> <!-- Lib Scripts Plugin Js -->
<script src="{{asset('admin/assets/bundles/vendorscripts.bundle.js')}}"></script> <!-- Lib Scripts Plugin Js -->

<script src="{{asset('admin/assets/plugins/jquery-validation/jquery.validate.js')}}"></script> <!-- Jquery Validation Plugin Css -->
<script src="{{asset('admin/assets/plugins/jquery-steps/jquery.steps.js')}}"></script> <!-- JQuery Steps Plugin Js -->

<script src="{{asset('admin/assets/bundles/mainscripts.bundle.js')}}"></script><!-- Custom Js -->
<script src="{{asset('admin/assets/js/pages/forms/form-validation.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-timepicker/jquery.timepicker.min.js"></script>




<!-- // -->

<script src="{{asset('admin/assets/plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.js')}}"></script> <!-- Bootstrap Colorpicker Js -->
<script src="{{asset('admin/assets/plugins/jquery-inputmask/jquery.inputmask.bundle.js')}}"></script> <!-- Input Mask Plugin Js -->
<script src="{{asset('admin/assets/plugins/multi-select/js/jquery.multi-select.js')}}"></script> <!-- Multi Select Plugin Js -->
<script src="{{asset('admin/assets/plugins/jquery-spinner/js/jquery.spinner.js')}}"></script> <!-- Jquery Spinner Plugin Js -->

<script src="{{asset('admin/assets/js/pages/forms/advanced-form-elements.js')}}"></script>


<script>
    //JQUERY FORM VALIDATION FOR ADD AND EDIT  
    $(document).ready(function() {

        $.validator.addMethod("greaterThanStartTime", function(value, element) {
            var startTime = $("#start_time").val(); // Get the value of the start time input
            var endTime = value; // Current value of the end time input
            if (startTime && endTime) {
                return endTime > startTime;
            }
            return true;
        }, "End time must be greater than start time");

        $('#setAvailability,#updateAvailability').validate({
            rules: {
                'day_of_week': {
                    'required': true
                },
                'start_time': {
                    'required': true
                },
                'end_time': {
                    'required': true,
                    'greaterThanStartTime': true
                },
            },
            messages: {
                'day_of_week': {
                    'required': 'Please enter the specific Day.'
                },
                'start_time': {
                    'required': 'Please enter the Start time.'
                },
                'end_time': {
                    'required': 'Please enter the End time.',
                    'greaterThanStartTime': 'End time must be greater than start time'

                },
            },

            highlight: function(input) {
                $(input).parents('.form-line').addClass('error');
            },
            unhighlight: function(input) {
                $(input).parents('.form-line').removeClass('error');
            },
            errorPlacement: function(error, element) {
                $(element).parents('.form-group').append(error);
            }
        });
    });

    //WHEN EDIT FORM WILL OPEN

    document.addEventListener('DOMContentLoaded', function() {
        // Get all the form inputs
        const formInputs = document.querySelectorAll('.form-control');

        // Iterate over each input
        formInputs.forEach(function(input) {
            // Check if the input has a predefined value
            if (input.value !== '') {
                // Add a class to the parent form-group to show the label
                input.parentElement.classList.add('focused');
            }

            // Add event listener for input focus
            input.addEventListener('focus', function() {
                // Add a class to the parent form-group to show the label
                this.parentElement.classList.add('focused');
            });

            // Add event listener for input blur
            input.addEventListener('blur', function() {
                // Check if the input value is empty
                if (this.value === '') {
                    // Remove the class from the parent form-group to hide the label
                    this.parentElement.classList.remove('focused');
                }
            });
        });
    });
</script>

@endpush