{{-- Extends layout --}}
@extends(getThemeBasePath())

@section('page_title')
    {{ $page_title }}
@endsection

{{-- Content --}}
@section('content')
    @php
        $SuctioningRequired = old('suctioning_required', $data['suctioning_required'] ?? 0);
        $ProbePlacement = old('probe_placement', $data['probe_placement'] ?? '');
        $SuctioningTypes = old('type_of_suctioning', $data['type_of_suctioning'] ?? 0);
        $otherSuctioningType = old('other_type_of_suctioning', $data['other_type_of_suctioning'] ?? '');
        $otherProbePlacement = old('other_probe_placement', $data['other_probe_placement'] ?? '');
    @endphp
    <!--begin::Card-->
    <form class="form" method="post" action="{{ $action }}" id="manage_form" enctype="multipart/form-data">
        <input type="hidden" name="is_mobile" value="{{!empty($isMobile) && $isMobile == true?1:''}}" id="">
        <input type="hidden" name="token" value="{{$token??''}}" id="">
        @if (!empty($data['id']))
            @method('PUT')
        @endif
        @csrf
        <input type="hidden" name="report_id" value="{{ $report_id }}" />
        <div class="card shadow-sm">
            <!--begin::Card header-->
            <div class="card-header card-header-tabs-line nav-tabs-line-3x">
                <!--begin::Toolbar-->
                <div class="card-toolbar">
                    <ul class="nav nav-tabs nav-line-tabs nav-stretch fs-6 border-0">
                        <!--begin::Item-->
                        <li class="nav-item me-3">
                            <a class="nav-link active" data-bs-toggle="tab" href="#kt_user_edit_tab_1">
                                <span class="nav-text font-size-lg">{{ $page_title }}</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <!--end::Toolbar-->
            </div>
            <!--end::Card header-->
            <!--begin::Card body-->
            <div class="card-body">
                <div class="tab-content">
                    <!--begin::Tab-->
                    <div class="tab-pane show active" id="kt_user_edit_tab_1" role="tabpanel">
                        <!--begin::Row-->
                        <div class="row">
                            @include('backend.errors')
                            <div class="col-md-8 my-2">
                                    <!--begin::Group-->
                                    <div class="form-group row mb-7">
                                        <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-xs-12 mt-3">
                                            <label class="col-form-label text-lg-right text-left">Date</label>
                                            <div class="input-group input-group-lg input-group-solid">
                                                <span class="input-group-text">
                                                    <i class="la la-calendar"></i>
                                                </span>
                                                <input class="form-control form-control-lg form-control-solid required" type="text" name="date" id="date" value="{{ $data['date'] ?? '' }}" autocomplete="off" readonly />
                                            </div>
                                            <span class="text-muted">Defaults to the shift case note date</span>
                                        </div>
                                        <!--begin::Group-->
                                        <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-xs-12 mt-3">
                                            <label class="col-form-label text-lg-right text-left">Time</label>
                                            <input class="form-control form-control-lg form-control-solid required bt_timepicker_3" type="text" name="time" id="time" value="{{$data['time']??''}}" />
                                        </div>
                                        <!--end::Group-->
                                        <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-xs-12 mt-3">
                                                <label class="col-form-label">Reading (%)</label>
                                                <input type="number" class="form-control form-control-lg form-control-solid required" name="reading" id="reading" value="{{ $data['reading'] ?? '' }}" min="0" max="100">
                                        </div>
                                    </div>

                                <div class="form-group row mb-7">
                                    <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-xs-12 mt-3">
                                        <label class="col-form-label text-lg-right text-left">Probe Placement</label>
                                            <select class="form-control form-control-solid required form-select" name="probe_placement" id="probe_placement" required>
                                                <option value="">Select</option>
                                                    @foreach (config('constant.probe_placement_types') as $gN => $gV)
                                                        <option value="{{ $gN }}" {{ $ProbePlacement == $gN ? 'selected' : '' }}>
                                                            {{ $gV }}
                                                        </option>
                                                    @endforeach
                                            </select>
                                    </div>
                                    <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-xs-12 mt-3 {{ $ProbePlacement === 'Other' ? '' : 'd-none' }}" id="other_probe_placement_group">
                                        <label class="col-form-label text-lg-right text-left">Specify Placement</label>
                                        <input class="form-control form-control-lg form-control-solid required" type="text" name="other_probe_placement" id="other_probe_placement" value="{{ $otherProbePlacement }}" maxlength="255"/>
                                    </div>
                                    <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-xs-12 mt-3">
                                        <label class="col-form-label text-lg-right text-left no-required">Suctioning Required?</label>
                                            <div class="radio-inline" id="suctioning_required_group">
                                            @foreach (config('constant.yes_no_list') as $key => $val)
                                                <label class="radio">
                                                    <input class="form-check-input no-required" type="radio" value="{{ $key }}" name="suctioning_required" id="suctioning_required{{ $key }}"
                                                        {{ $SuctioningRequired == $key ? 'checked' : '' }} />
                                                    {{ $val }}
                                                </label>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                                <div id="suctioning_section" class="{{ (int) $SuctioningRequired === 1 ? '' : 'd-none' }}">
                                    <div class="form-group row mb-7">
                                        <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-xs-12 mt-3">  
                                                <label class="col-form-label text-lg-right text-left">Type of Suctioning</label>
                                                <select class="form-control form-control-solid form-select required" name="type_of_suctioning" id="type_of_suctioning" required>
                                                    <option value="">Select</option>
                                                        @foreach (config('constant.suctioning_types') as $gN => $gV)
                                                            <option value="{{ $gN }}" {{ $SuctioningTypes == $gN ? 'selected' : '' }}>
                                                                {{ $gV }}
                                                            </option>
                                                        @endforeach
                                                </select>
                                        </div>
                                        <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-xs-12 mt-3 {{ $SuctioningTypes === 'Other' ? '' : 'd-none' }}" id="other_type_of_suctioning_group">
                                                <label class="col-form-label text-lg-right text-left">Specify Type</label>
                                                <input class="form-control form-control-lg form-control-solid required" type="text" name="other_type_of_suctioning" id="other_type_of_suctioning" value="{{ $otherSuctioningType ?? '' }}" maxlength="255"/>
                                        </div>
                                            <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-xs-12 mt-3">  
                                                <label class="col-form-label text-lg-right text-left">Suction Amount</label>
                                                <textarea class="form-control form-control-lg form-control-solid required" name="suction_amount" id="suction_amount" maxlength="2000">{{ old('suction_amount', $data['suction_amount'] ?? '') }}</textarea>
                                                <span class="form-text text-muted">Approximate amount (e.g., small, moderate, large).</span>
                                            </div>
                                    </div>
                                
                                    <div class="form-group row mb-7">
                                        <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-xs-12 mt-3">  
                                                <label class="col-form-label text-lg-right text-left">Secretion Description</label>
                                                <textarea class="form-control form-control-lg form-control-solid required" name="secretion_description" id="secretion_description" maxlength="2000">{{ old('secretion_description', $data['secretion_description'] ?? '') }}</textarea>
                                                <span class="form-text text-muted">Description of secretion (e.g., thick, thin, yellow, clear).</span>
                                        </div>
                                        <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-xs-12 mt-3">
                                                <label class="col-form-label">Reading Post Suctioning</label>
                                                <input type="number" class="form-control form-control-lg form-control-solid required" name="reading_post_suctioning" id="reading_post_suctioning" value="{{ $data['reading_post_suctioning'] ?? '' }}" min="0" max="100">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--end::Row-->
                        </div>
                     <!--end::Tab-->
                    </div>
                </div>
                <!--begin::Card body-->
                <div class="card-footer text-right">
                    <button type="submit" class="btn btn-primary me-2 btn-hover-rise" id="oxygensubmit" onclick="$('#manage_form').submit();">Submit</button>
                    @if (!empty($isMobile) && $isMobile == true && !empty($token))
                        <a href="{{route('shift_case_notes.index',['report_id' => $report_id,'step'=>13,'is_mobile' => 1, 'token' => $token])}}"><button type="button" class="btn btn-secondary btn-hover-rise">Cancel</button></a>
                    @else
                        <a href="{{route('shift_case_notes.index',['report_id' => $report_id,'step'=>13])}}"><button type="button" class="btn btn-secondary btn-hover-rise">Cancel</button></a>
                    @endif
                </div>
            </div>
        </div>
        <!--end::Card-->
    </form>
@endsection

{{-- Scripts Section --}}
@section('scripts')
    <script type="text/javascript">
        $(document).ready(function() {
            initTimepicker3();
            $('#manage_form').validate({
                ignore: [],
                rules: {
                    date: { required: true },
                    time: { required: true },
                    reading: {
                        required: true,
                        min: 0,
                        max: 100
                    },
                    probe_placement: {
                        required: true
                    },
                    other_probe_placement: {
                        required: function() {
                            return $('#probe_placement').val() === 'Other';
                        }
                    },
                    type_of_suctioning: {
                        required: function() {
                            return $('#suctioning_required').is(':checked');
                        }
                    },
                    other_type_of_suctioning: {
                        required: function() {
                            return $('#type_of_suctioning').val() === 'Other';
                        }
                    },
                    suction_amount: {
                        required: function() {
                            return $('input[name ="suctioning_required"]:checked').val() === '1';
                        }
                    },
                    secretion_description: {
                        required: function() {
                            return $('input[name ="suctioning_required"]:checked').val() === '1';
                        }
                    },
                    reading_post_suctioning: {
                    required: function() {
                        return $('input[name ="suctioning_required"]:checked').val() === '1';
                    },
                        min: 0,
                        max: 100
                    }
                },

                invalidHandler: function(form, validator) {
                    $('button[type="submit"]').removeAttr('disabled');
                    var errors = validator.numberOfInvalids();
                    if (errors && errors == 1) {
                        $('#oxygensubmit').removeAttr('disabled')
                        console.log(validator.errorList)
                    } else {
                        $('#oxygensubmit').removeAttr('disabled')
                    }
                }
                

            });

            const probePlacementSelect = $('#probe_placement');
            const otherprobePlacementGroup = $('#other_probe_placement_group');
            const otherprobePlacementTypeInput = $('#other_probe_placement');

            const toggleOtherProbePlacementTypeField = function() {
                const isOther = probePlacementSelect.val() === 'Other';

                if (isOther) {
                    otherprobePlacementGroup.removeClass('d-none');
                    otherprobePlacementTypeInput.prop('required', true);
                } else {
                    otherprobePlacementGroup.addClass('d-none');
                    otherprobePlacementTypeInput.prop('required', false);
                    otherprobePlacementTypeInput.val('');
                }
            };

            probePlacementSelect.on('change', toggleOtherProbePlacementTypeField);
            toggleOtherProbePlacementTypeField();

            const SuctioningSelect = $('#type_of_suctioning');
            const otherSuctioningGroup = $('#other_type_of_suctioning_group');
            const otherSuctioningTypeInput = $('#other_type_of_suctioning');

            const toggleOtherSuctioningTypeField = function() {
                const isOther = SuctioningSelect.val() === 'Other';

                if (isOther) {
                    otherSuctioningGroup.removeClass('d-none');
                    otherSuctioningTypeInput.prop('required', true);
                } else {
                    otherSuctioningGroup.addClass('d-none');
                    otherSuctioningTypeInput.prop('required', false);
                    otherSuctioningTypeInput.val('');
                }
            };

            SuctioningSelect.on('change', toggleOtherSuctioningTypeField);
            toggleOtherSuctioningTypeField();

            const toggleFollowUpFields = function() {
                const isEnabled = $('input[name ="suctioning_required"]:checked').val() === '1';

                if (isEnabled) {
                    $('#suctioning_section').removeClass('d-none');
                } else {
                    $('#suctioning_section').addClass('d-none');
                    $('#type_of_suctioning').val('');
                    $('#other_type_of_suctioning').val('');
                    $('#suction_amount').val('');
                    $('#secretion_description').val('');
                    $('#reading_post_suctioning').val('');
                }
            };

            $('input[name="suctioning_required"]').on('change', toggleFollowUpFields);
            toggleFollowUpFields();
        });
    </script>
@endsection