@extends('layouts.app')

@section('content')
    <form action="{{ route('out.emergency-exit.store') }}" class="col col-lg-9 pd-30" id="form_request_ajax" method="POST">
        @csrf
        <!-- Page Title -->
        <div class="page-title divider-b pdb-10 flexbox align-between align-center-y mb-20">
            <h1 class="reset-block primary-color lineheight-130 fs-20">الخروج الاضطراري - تسجديل طلب</h1>

            <button class="btn small primary">ارسال الطلب </button>

        </div>
        <!-- // Page Title -->

        <!-- Grid -->
        <div class="row">
            @include('outs.parts.prisoner_info', ['prisoner' => null, 'type' => null])
        </div>

        <!-- Grid-->
        <div class="row">
            <!-- Widget Block -->
            <div class="col-12">
                <div class="widget-block mb-30 white-bg radius-g pdb-5 form-ui gray-form">
                    <!-- Title -->
                    <h3 class="far fa-angle-up widget-title fs-15 pdx-20 pdy-10 medium-weight mb-20">بيانات الطلب</h3>
                    <!-- Content -->
                    <div class="widget-content pdx-20">
                        <!-- grid -->
                        <div class="row">
                            <!-- column -->
                            <div class="col-12 col-md-6">
                                <!-- Form Control -->
                                <label for="">سبب الخروج</label>
                                <select name="exit_cause" id="exit_cause" class="advanced-select req" dir="rtl"
                                    style="text-align: right ">
                                    <option value="">-- أختر -- </option>
                                    @foreach (config('static_prisoner_out.exit_cause_emergency') as $key => $value)
                                        <option value="{{ $key }}">
                                            {{ $value }}
                                        </option>
                                    @endforeach

                                </select>
                            </div>
                            <div class="col-12 col-md-6 exit_cause_other_description hidden">
                                <!-- Form Control -->
                                <label for=""> سبب الخروج</label>
                                <input type="text" placeholder="" name="exit_cause_other_description" class="req"
                                    value="">
                            </div>


                            <!-- column -->
                            <!-- column -->
                            <div class="col-12 col-md-6">
                                <!-- Form Control -->
                                <label for="">تاريخ طلب الخروج</label>
                                <div class="pos-rel">
                                    <input data-url="{{ route('out.get-return_defualt_date_hijri') }}" type="text"
                                        class="date-hijri-after-now-and-today req" name="request_date_hijri"
                                        id="request_date_hijri" placeholder="" value="">
                                </div>
                            </div>

                            <!-- column -->


                            <!-- column -->
                            <div class="col-12 col-md-6">
                                <!-- Form Control -->
                                <label for="">مدة الخروج</label>
                                <select data-url="{{ route('out.get-return_defualt_date_hijri') }}" name="duration"
                                    id="duration" class="req">
                                    <option value="">-- أختر -- </option>
                                    <option value="24">24 ساعة</option>
                                    <option value="48">48 ساعة</option>
                                    <option value="72">72 ساعة</option>
                                </select>
                            </div>
                            <!-- column -->
                            <div class="col-12 col-md-6">
                                <!-- Form Control -->
                                <label for="">تاريخ العودة المفترض</label>
                                <div class="pos-rel">
                                    <input type="text" readonly class=" req" name="return_defualt_date_hijri"
                                        id="return_defualt_date_hijri" placeholder="" value="">
                                </div>

                            </div>

                            <!-- column -->
                            <div class="col-12 col-md-6">
                                <!-- Form Control -->
                                <label for="">مصدر خطاب الموافقة</label>
                                <input type="text" placeholder="" name="letter_source" class="req" value="">
                            </div>

                            <!-- column -->
                            <div class="col-12 col-md-6">
                                <!-- Form Control -->
                                <label for="">رقم الخطاب</label>
                                <input type="text" placeholder="" name="letter_number" class="req" value="">
                            </div>

                            <!-- column -->
                            <div class="col-12 col-md-6">
                                <!-- Form Control -->
                                <label for="">تاريخ الخطاب</label>
                                <div class="pos-rel">
                                    <input type="text" class="date-hijri-after-now-and-today req"
                                        name="letter_date_hijri" id="letter_date_hijri" placeholder="" value="">
                                </div>
                            </div>
                            <!-- column -->
                            <div class="col-12 col-md-12">
                                <!-- Form Control -->
                                <label for="">ملاحظات</label>
                                <textarea name="notes" id="notes" cols="30" rows="10"></textarea>
                            </div>


                        </div>
                        <!-- // grid -->
                    </div>
                    <!-- // Content -->
                </div>
            </div>
            <div class="col-12 col-md-6">
                <!--  -->
                <label for="" class="color-transparent">..</label>
                <button class="btn fluid primary" tabindex="0" role="button" aria-pressed="false">ارسال الطلب</button>
            </div>


        </div>

    </form>
@endsection

@section('script')
    <script>
        $(function() {
            $("#exit_cause").change(function() {
                if ($(this).val() == "other") {
                    $(".exit_cause_other_description").removeClass('hidden');
                } else {
                    $(".exit_cause_other_description").addClass('hidden');
                }
            })



            $(document).on('focusout ,  change', "#register_out ,#duration ", function(e) {
                if ($("#request_date_hijri").val() && $("#duration").val()) {
                    url = $(this).data("url") + "?date=" + $("#request_date_hijri").val() + "&duration=" +
                        $("#duration").val();
                    $.ajax({
                        url: url,
                        success: function(res) {
                            $("input[name='return_defualt_date_hijri']").val(res.data
                                .return_defualt_date_hijri)
                            console.log(res)
                        }
                    })
                }

            })
        })
    </script>
@endsection