@include('patient.layout.header')


<!-- //wrapper -->
<div class="wrapper" id="wrapper">
    <section id="dose" class="dose p-70" style="background-image:url(landing/images/dose-bg.png)">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="middle_name">
                        <h3 id="patient_name">Dear {{ $patient_name }},</h3>
                        <p>It uses a dictionary of over 200 Latin words, combined with a handful of model sentence
                            structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is
                            therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
                    </div>
                </div>
            </div>
            <div class="row">

                <div class="col-lg-6 col-md-6 col-sm-12 m-auto">
                    <div class="reminder_dose">
                        <div class="dose_first">
                            <div class="dose_one">
                                <span>Dosage Reminder</span>
                                <div class="toggle">
                                    <input id="dosage_reminder" name="dosage_reminder" type="checkbox"
                                        {{ $is_dosage_reminder_set == 'Y' ? 'checked' : '' }} />
                                    <label></label>
                                </div>
                            </div>
                            <p>It uses a dictionary of over 200 Latin words, combined with a handful of model sentence
                                structures looks reasonable.</p>
                        </div>
                        {!! Form::open([
                            'url' => '#',
                            'name' => 'dosageReminderForm',
                            'id' => 'dosageReminderForm',
                            'enctype' => 'multipart/form-data',
                        ]) !!}
                        <input type="hidden" id="patient_id" name="patient_id" value="{{ $patient_id }}">
                        <div class="time_dose">
                            <div class="top_time">
                                <div class="left">
                                    <span><img src="{{ asset('landing/images/morning.png') }}"
                                            class="me-2">Morning</span>
                                    <div class="toggle">
                                        <input id="morning_dose" name="morning_dose" type="checkbox"
                                            {{ $is_morning_reminder_set == 'Y' ? 'checked' : '' }} />
                                        <label></label>
                                    </div>
                                </div>
                                <div class="right">
                                    <div class="fixed_time">
                                        <div class="mb-0 time_input">
                                            <input type="text" name="morning_time" id="morning_time"
                                                value="{{ old('morning_time', $morning_time) }}" class="timepicker form-control">

                                        </div>
                                    </div>
                                </div>
                                <label id="morning_dose-error" class="error" for="morning_dose"></label>
                            </div>
                            <div class="top_time">
                                <div class="left">
                                    <span><img src="{{ asset('landing/images/afternoon.png') }}"
                                            class="me-2">Afternoon</span>
                                    <div class="toggle">
                                        <input id="afternoon_dose" name="afternoon_dose" type="checkbox"
                                            {{ $is_afternoon_reminder_set == 'Y' ? 'checked' : '' }} />
                                        <label></label>
                                    </div>
                                </div>
                                <div class="right">
                                    <div class="fixed_time">
                                        <div class="mb-0 time_input">
                                            <input type="text" class="timepicker form-control" id="afternoon_time"
                                                name="afternoon_time"
                                                value="{{ old('afternoon_time', $afternoon_time) }}" placeholder="">

                                        </div>
                                    </div>
                                </div>
                                <label id="afternoon_dose-error" class="error" for="afternoon_dose"></label>
                            </div>
                            <div class="top_time">
                                <div class="left">
                                    <span><img src="{{ asset('landing/images/night.png') }}" class="me-2">Night</span>
                                    <div class="toggle">
                                        <input id="night_dose" name="night_dose" type="checkbox"
                                            {{ $is_night_reminder_set == 'Y' ? 'checked' : '' }} />
                                        <label></label>
                                    </div>
                                </div>
                                <div class="right">
                                    <div class="fixed_time">
                                        <div class="mb-0 time_input">
                                            <input type="text" class="timepicker form-control" id="night_time"
                                                name="night_time" value="{{ old('night_time', $night_time) }}"
                                                placeholder="">
                                        </div>
                                    </div>
                                </div>
                                <label id="night_dose-error" class="error" for="night_dose"></label>
                            </div>
                        </div>
                        <div class="custom_check">
                            <label>
                                <input type="checkbox" id="terms_condition" name="terms_condition"
                                    {{ $terms_condition_checked ? 'checked' : '' }}>
                                <span>I agree to the Terms & Conditions and Privacy Policy.</span>
                            </label>
                            <label id="terms_condition-error" class="error" for="terms_condition"></label>
                        </div>
                        <button type="submit" id="submit" name="submit" class="btn btn-primary">Submit</button>
                        {!! Form::close() !!}

                    </div>
                </div>
                <div class="col-lg-5 col-md-6 col-sm-12 ms-auto">
                    <div class="content_dose_img">
                        <img src="{{ asset('landing/images/dose-right.png') }}">
                    </div>
                </div>

            </div>
        </div>
    </section>
</div>
<!-- //wrapper-end -->
@include('patient.layout.footer')


<script>
    $(document).ready(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $('#dosageReminderForm').validate({
            rules: {
                morning_time: {
                    required: {
                        depends: function(element) {
                            return $('#morning_dose').is(':checked');
                        }
                    }
                },
                afternoon_time: {
                    required: {
                        depends: function(element) {
                            return $('#afternoon_dose').is(':checked');
                        }
                    }
                },
                night_time: {
                    required: {
                        depends: function(element) {
                            return $('#night_dose').is(':checked');
                        }
                    }
                },

            },
            messages: {
                morning_time: "Please enter morning time.",
                afternoon_time: "Please enter afternoon time.",
                night_time: "Please enter night time.",

            },
            errorPlacement: function(error, element) {
                if (element.attr("name") == "terms_condition") {
                    error.appendTo('#terms_condition-error');
                } else {
                    error.insertAfter(element);
                }
            },
            submitHandler: function(form) {

                if (!$('#morning_dose').is(':checked') &&
                    !$('#afternoon_dose').is(':checked') &&
                    !$('#night_dose').is(':checked')) {
                    toastr.error("At least one dose must be selected.");
                    return false;
                }

                let valid = true;

                if ($('#morning_dose').is(':checked')) {
                    let morningTime = $('#morning_time').val();
                    if (morningTime === '' || morningTime === '00:00') {
                        toastr.error("Please enter a valid morning time.");
                        valid = false;
                    }
                }

                if ($('#afternoon_dose').is(':checked')) {
                    let afternoonTime = $('#afternoon_time').val();
                    if (afternoonTime === '' || afternoonTime === '00:00') {
                        toastr.error("Please enter a valid afternoon time.");
                        valid = false;
                    }
                }

                if ($('#night_dose').is(':checked')) {
                    let nightTime = $('#night_time').val();
                    if (nightTime === '' || nightTime === '00:00') {
                        toastr.error("Please enter a valid night time.");
                        valid = false;
                    }
                }

                if (!valid) {
                    return false;
                }


                if (!$('#terms_condition').is(':checked')) {
                    toastr.error("Please must agree to the Terms & Conditions and Privacy Policy.");
                    return false;
                }

                let patientId = $('#patient_id').val();
                let formData = {
                    dosage_reminder: $('#dosage_reminder').is(':checked') ? 'Y' : 'N',
                    morning_dose: $('#morning_dose').is(':checked') ? 'Y' : 'N',
                    afternoon_dose: $('#afternoon_dose').is(':checked') ? 'Y' : 'N',
                    night_dose: $('#night_dose').is(':checked') ? 'Y' : 'N',
                    morning_time: $('#morning_dose').is(':checked') ? $('#morning_time').val() :
                        null,
                    afternoon_time: $('#afternoon_dose').is(':checked') ? $('#afternoon_time')
                        .val() : null,
                    night_time: $('#night_dose').is(':checked') ? $('#night_time').val() : null,
                    patient_id: patientId
                };


                $("#submit").attr('disabled', true);

                $.ajax({
                    url: "{{ route('saveDosageReminder') }}",
                    type: 'POST',
                    data: formData,
                    success: function(response) {
                        if (response.success) {
                            toastr.success(response.message);
                            setTimeout(function() {
                                $("#submit").attr('disabled', false);
                                window.location.href = "{{ route('home') }}";
                            }, 1500);
                        } else {
                            $("#submit").attr('disabled', false);
                            toastr.error(response.message || "Something went wrong.");
                        }
                    },
                    error: function(xhr, status, error) {
                        $("#submit").attr('disabled', false);
                        toastr.error("An error occurred. Please try again.");
                        console.error(xhr.responseText);
                    }
                });
            }
        });

        $('#dosage_reminder').on('change', function() {
            let isChecked = $(this).is(':checked') ? 'Y' : 'N';
            let patientId = $('#patient_id').val();

            if (isChecked === 'N') {
                $('#morning_time').val("00:00");
                $('#afternoon_time').val("00:00");
                $('#night_time').val("00:00");
                $('#morning_dose').prop('checked', false);
                $('#afternoon_dose').prop('checked', false);
                $('#night_dose').prop('checked', false);
                $('#terms_condition').prop('checked', false);
            }

            $.ajax({
                url: "{{ route('updateDosageReminder') }}",
                type: 'POST',
                data: {
                    dosage_reminder: isChecked,
                    morning_dose: $('#morning_dose').is(':checked') ? 'Y' : 'N',
                    afternoon_dose: $('#afternoon_dose').is(':checked') ? 'Y' : 'N',
                    night_dose: $('#night_dose').is(':checked') ? 'Y' : 'N',
                    morning_time: isChecked === 'Y' ? $('#morning_time').val() : '00:00',
                    afternoon_time: isChecked === 'Y' ? $('#afternoon_time').val() : '00:00',
                    night_time: isChecked === 'Y' ? $('#night_time').val() : '00:00',
                    patient_id: patientId
                },
                success: function(response) {
                    if (response.success) {
                        toastr.success(response.message);
                    } else {
                        toastr.error(response.message || "Something went wrong.");
                    }
                },
                error: function(xhr, status, error) {
                    toastr.error("An error occurred. Please try again.");
                    console.error(xhr.responseText);
                }
            });

            toggleFormElements(isChecked !== 'Y');
        });


        function toggleFormElements(disabled) {
            $('#morning_dose').prop('disabled', disabled);
            $('#afternoon_dose').prop('disabled', disabled);
            $('#night_dose').prop('disabled', disabled);
            $('#terms_condition').prop('disabled', disabled);
            $('#submit').prop('disabled', disabled);

            toggleDoseTimeInput('#morning_dose', '#morning_time');
            toggleDoseTimeInput('#afternoon_dose', '#afternoon_time');
            toggleDoseTimeInput('#night_dose', '#night_time');
        }

        function toggleDoseTimeInput(doseCheckboxId, timeInputId) {
            if ($(doseCheckboxId).is(':checked')) {
                $(timeInputId).prop('disabled', false);
                $(timeInputId).prop('add', 'required');
            } else {
                $(timeInputId).val('00:00').prop('disabled', true);
            }
        }


        toggleFormElements(!$('#dosage_reminder').is(':checked'));

        $('#morning_dose').on('change', function() {
            toggleDoseTimeInput('#morning_dose', '#morning_time');
        });

        $('#afternoon_dose').on('change', function() {
            toggleDoseTimeInput('#afternoon_dose', '#afternoon_time');
        });

        $('#night_dose').on('change', function() {
            toggleDoseTimeInput('#night_dose', '#night_time');
        });


    });
</script>

<script>
    jQuery(function() {
        var morningTime = "{{ old('morning_time', $morning_time) }}";
        jQuery('#morning_time').daterangepicker({
            timePicker: true,
            timePicker24Hour: false,
            timePickerIncrement: 1,
            singleDatePicker: true,
            showDropdowns: false,
            autoUpdateInput: false,
            startDate: morningTime ? moment(morningTime, 'hh:mm A') : moment().startOf('day').hour(8)
                .minute(0),
            minDate: moment().startOf('day').hour(6).minute(0),
            maxDate: moment().startOf('day').hour(12).minute(0),
            locale: {
                format: 'hh:mm A'
            }
        }, function(start) {
            jQuery('#morning_time').val(start.format('hh:mm A'));
        });
        if (morningTime) {
            jQuery('#morning_time').val(moment(morningTime, 'hh:mm A').format('hh:mm A'));
        }

        var afternoonTime = "{{ old('afternoon_time', $afternoon_time) }}";
        jQuery('#afternoon_time').daterangepicker({
            timePicker: true,
            timePicker24Hour: false,
            timePickerIncrement: 1,
            singleDatePicker: true,
            showDropdowns: false,
            autoUpdateInput: false,
            startDate: afternoonTime ? moment(afternoonTime, 'hh:mm A') : moment().startOf('day').hour(
                14).minute(0),
            minDate: moment().startOf('day').hour(12).minute(0),
            maxDate: moment().startOf('day').hour(18).minute(0),
            locale: {
                format: 'hh:mm A'
            }
        }, function(start) {
            jQuery('#afternoon_time').val(start.format('hh:mm A'));
        });
        if (afternoonTime) {
            jQuery('#afternoon_time').val(moment(afternoonTime, 'hh:mm A').format('hh:mm A'));
        }

        var nightTime = "{{ old('night_time', $night_time) }}";
        jQuery('#night_time').daterangepicker({
            timePicker: true,
            timePicker24Hour: false,
            timePickerIncrement: 1,
            singleDatePicker: true,
            showDropdowns: false,
            autoUpdateInput: false,
            startDate: nightTime ? moment(nightTime, 'hh:mm A') : moment().startOf('day').hour(21)
                .minute(0),
            minDate: moment().startOf('day').hour(18).minute(0),
            maxDate: moment().startOf('day').hour(23).minute(59),
            locale: {
                format: 'hh:mm A'
            }
        }, function(start) {
            jQuery('#night_time').val(start.format('hh:mm A'));
        });
        if (nightTime) {
            jQuery('#night_time').val(moment(nightTime, 'hh:mm A').format('hh:mm A'));
        }

        jQuery('.daterangepicker .calendar-table').hide();
        jQuery('.daterangepicker .ranges').hide();
    });
</script>