@extends('layouts.app')

@section('content')
    <form action="{{ route('visitor.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">
            <x-prisoner-info />

            <div class="col-md-6" id="prisoner_visitors">

            </div>
        </div>

        <!-- // Grid -->


        <!-- Column -->
        <div class="col-12">
            <div class="widget-block mb-30 white-bg radius-g pdb-20 repeater">
                <h3
                    class="flexbox align-between align-center-y widget-title fs-15 pdx-20 pdy-10 medium-weight mb-20 primary">
                    <span>بيانات الزياره</span>
                </h3>
                <div class="row px-5" style="padding: 0 15px">
                    <div class="col col-lg-2">
                        <!-- Control Label -->
                        <label for="">نوع الزيارة</label>
                        <!-- Control Input -->
                        <select class="" name="visiting_type">
                            <option value="">-- اختيار --</option>
                            @foreach (config('static.visiting_type') as $key => $info)
                                <option value="{{ $key }}">{{ $info }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col col-lg-3">
                        <!-- Control Label -->
                        <label for="">تاريخ الزيارة</label>
                        <!-- Control Input -->
                        <div class="pos-rel">
                            <input type="text" class="date-hijri-open" name="visite_date_hijri"
                                placeholder="تاريخ الزيارة" value="">
                        </div>
                    </div>
                </div>

            </div>

            <!-- Widget Block -->
            <div class="widget-block mb-30 white-bg radius-g pdb-20 repeater">

                <!-- Widget Main Title -->
                <h3
                    class="flexbox align-between align-center-y widget-title fs-15 pdx-20 pdy-10 medium-weight mb-20 primary">
                    <span>بيانات الزائر</span>
                    <button type="button" class="btn primary display-block square fas fa-plus tiny plus_input_btn"
                        data-repeater-create="" tabindex="0" role="button" aria-pressed="false"></button>
                    <input type="hidden" value="1" name="visitor_counter" id="visitor_counter">
                </h3>

                <!-- Control Input -->
                <div data-repeater-list="visitor_info">
                    <!-- Layout Wrapper -->
                    <div class="row gpx-10 ms-10 me-10 divider-b divider-b2  mb-20 pdt-10"
                        style="border-radius: 5px;padding: 10px;border: 1px #0000005c solid; margin:0px 0px 10px 0px;margin:20px"
                        data-repeater-item="">

                        <!-- Layout Column -->
                        <div class="col col-lg-6">
                            <!-- Control Label -->
                            <label for="">اسم الزائر </label>
                            <!-- Control Input -->
                            <div class="col form-group justify-content-around">
                                <div class="col-3">
                                    <input type="text" class="input_validation" name="visitor_info[first_name]"
                                        id="first_name" placeholder="الاسم الأول" value="">
                                </div>
                                <div class="col-3">
                                    <input type="text" class="input_validation" name="visitor_info[second_name]"
                                        id="second_name" placeholder="الاسم الثاني" value="">
                                </div>
                                <div class="col-3">
                                    <input type="text" class="input_validation" name="visitor_info[third_name]"
                                        id="third_name" placeholder="الاسم الثالث" value="">
                                </div>
                                <div class="col-3">
                                    <input type="text" class="input_validation" name="visitor_info[fourth_name]"
                                        id="fourth_name" placeholder="الاسم الرابع" value="">
                                </div>
                            </div>
                        </div>
                        <div class="col-5">
                            <!-- Control Label -->
                            <label class="col col-12 col-md-5 col-lg-4">رقم الهوية</label>
                            <div class="" dir="ltr">
                                @for ($i = 0; $i < 10; $i++)
                                    <input type="text" data-name_inp="id_number"
                                        style=" display: inline-block;margin-left: 5px;" value="" maxlength="1"
                                        min="0" max="9"
                                        class="inp_repate  inp_id_number  inp_arr_id_number_{{ $i + 1 }}   inp_repate_id_number_num_{{ $i + 1 }} col-1"
                                        data-inp_repate_num="{{ $i + 1 }}"
                                        name="visitor_info[identity_number[{{ $i }}]]">
                                @endfor
                            </div>
                        </div>
                        <div class="col-6">
                            <!-- Form Control -->
                            <label class="col col-12 col-md-5 col-lg-4">الجنسية</label>
                            <div class="form-group col-9">
                                <!-- Form Control -->
                                <select class="req" name="visitor_info[nationality_id]" id="nationality_id">
                                    <option value="">-- اختيار --</option>
                                    @foreach ($nationalites as $key => $nationality)
                                        <option value="{{ $nationality->id }}">{{ $nationality->name }}</option>
                                    @endforeach
                                </select>
                                <!-- Form Control -->
                            </div>
                        </div>
                        <div class="col col-lg-3">
                            <!-- Control Label -->
                            <label for="">معرفته بالنزيل</label>
                            <!-- Control Input -->
                            <input type="text" class="req" name="visitor_info[prisoner_knowledge]"
                                placeholder="معرفته بالنزيل" value="">
                        </div>
                        <!-- Layout Column -->
                        <div class="col-6">
                            <!-- Control Label -->
                            <label for="">عنوان السكن</label>
                            <!-- Control Input -->
                            <div class="col form-group justify-content-nowrap">
                                @foreach (config('static.address') as $key => $val)
                                    <div class="col-2">
                                        <input type="text" name="visitor_info[{{ $key }}]"
                                            class="col-12 req inp_arr_address_{{ $key }}"
                                            placeholder="{{ $val }}" value="">
                                    </div>
                                @endforeach
                            </div>
                        </div>
                        <!-- Layout Column -->
                        <div class="col-5">
                            <label class="col col-12 col-md-5 col-lg-4">رقم الجوال</label>
                            <div class="" dir="ltr">
                                @for ($i = 0; $i < 10; $i++)
                                    <input type="text" data-name_inp="mobile"
                                        style=" display: inline-block;margin-left: 5px;" value="" maxlength="1"
                                        min="0" max="9"
                                        class="inp_repate  inp_arr_mobile_{{ $i + 1 }}   inp_repate_mobile_num_{{ $i + 1 }} col-1"
                                        data-inp_repate_num="{{ $i + 1 }}"
                                        name="visitor_info[mobile_number[{{ $i }}]]">
                                @endfor
                            </div>
                        </div>
                        <div class="col-5">
                            <label class="col col-12 col-md-5 col-lg-4"> هاتف ثابت </label>
                            <div class="" dir="ltr">
                                @for ($i = 0; $i < 10; $i++)
                                    <input type="text" data-name_inp="mobile2"
                                        style=" display: inline-block;margin-left: 5px;" value="" maxlength="1"
                                        min="0" max="9"
                                        class="inp_repate  inp_arr_mobile2_{{ $i + 1 }}   inp_repate_mobile2_num_{{ $i + 1 }} col-1"
                                        data-inp_repate_num="{{ $i + 1 }}"
                                        name="visitor_info[mobile_number_other[{{ $i }}]]">
                                @endfor
                            </div>
                        </div>
                        <!-- Layout Column -->
                        <div class="col col-lg-3">
                            <!-- Control Label -->
                            <label for="">عدد الزيارات</label>
                            <!-- Control Input -->
                            <input type="text" class="req" name="visitor_info[visiting_count]"
                                placeholder="عدد الزيارات" value="" readonly>
                        </div>
                        <div class="col col-lg-3">
                            <!-- Control Label -->
                            <label for="">تاريخ اخر زيارة</label>
                            <!-- Control Input -->
                            <div class="pos-rel">
                                <input type="text" class="date-hijri" name="visitor_info[last_visite_date_hijri]"
                                    placeholder="تاريخ اخر زيارة" value="" readonly>
                            </div>
                        </div>
                        <!-- Delete Button -->
                        <button type="button" style="background: #beb3b3"
                            class="btn transparent danger-color display-block square fas fa-times tiny remove-repeater"
                            data-repeater-delete="" tabindex="0" role="button" aria-pressed="false"></button>
                    </div>
                </div>
                <!-- Group Wrapper -->

                <!-- // Group Wrapper -->
            </div>
            <!-- // Widget Block -->
        </div>
    </form>

    <!-- // Column -->
@endsection

@section('script')
    <script src="{{ asset('assets/js/repate-inputs_old.js') }}"></script>
    <script>
        $(document).ready(function() {


            $(document).on('focusout', '#prisoner_id_number', function() {
                console.log('test');
                var prisoner_id_number = $(this).val();
                url = "{{ route('visitor.prisoner_visitors') }}?identity_number=" + prisoner_id_number;
                $.ajax({
                    url,
                    success: function(res) {
                        console.log(res);

                        $("#prisoner_visitors").html(res);
                    }
                });



            });


            $(".plus_input_btn").click(function() {
                var visitor_counter_value = $("#visitor_counter").val();
                visitor_counter_value = parseInt(visitor_counter_value)
                $("#visitor_counter").val(visitor_counter_value + 1);
                console.log($("#visitor_counter").val())
            })

            $(document).on('keyup', '.inp_id_number ', function() {
                var identity_number = "";
                // var count_visitor_name = $(this).attr('name').substring(0, 15) + "[visiting_count]";
                // var count_visitor_value_name = $(`input[name='${count_visitor_name}']`).val()
                for (j = 0; j < $("#visitor_counter").val(); j++) {
                    for (i = 0; i < 10; i++) {
                        var name = `visitor_info[${j}][identity_number${i}]`;
                        var value = $(`input[name='${name}']`).val();
                        if (value) {
                            identity_number += value
                        }
                    }
                    if (identity_number.length == 10) {
                        var prisoner_id_number = $("#prisoner_id_number").val();
                        var prisoner_id = $("#prisoner_id").val();
                        console.log(prisoner_id_number);
                        // if (count_visitor_value_name != "0" || !count_visitor_value_name) {
                        $.ajax({
                            url: "{{ route('visitor.check_visits') }}",
                            data: {
                                identity_number: identity_number, // Use the correct field name for the id_number
                                prisoner_id: prisoner_id
                            },
                            success: (function(index) {
                                return function(res) {
                                    console.log(res);
                                    $(`input[name='visitor_info[${index}][visiting_count]']`)
                                        .val(res.data.visit_count);

                                    $(`input[name='visitor_info[${index}][last_visite_date_hijri]']`)
                                        .val(res.data.last_visit);

                                };
                            })(j),
                            error: function(xhr, status, error) {
                                console.error("Error checking visits:", error);
                            }
                        });
                        // }

                    }
                    identity_number = "";
                    console.log(identity_number.length);
                }
            });
        })
    </script>
@endsection