@extends('layouts.app')

@section('content')
    <form action="{{ route('deposit.store') }}" class="col col-lg-9 pd-30" id="form_request_ajax" enctype="multipart/form-data">
        <!-- 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 -->

        @csrf
        <!-- token create  -->

        <!-- Grid -->
        <div class="row">
            <x-prisoner-info />
            <!-- Widget Group -->
            <!-- Column -->
            <div class="col-6">
                <!-- Details Widget -->
                <div class="widget-block mb-30 white-bg radius-g pdb-20 form-ui gray-form">
                    <!-- Title -->
                    <h3 class="far fa-angle-up widget-title fs-15 pdx-20 pdy-10 medium-weight mb-20 primary">رقم
                        الصندوق</h3>
                    <!-- Content -->
                    <div class="widget-content pdx-20">

                        <!-- Control Label -->

                        <!-- Control Label -->
                        <label for="box_number" class="mb-5">رقم الصندوق</label>
                        <!-- Control Inpiut -->
                        <input type="number" class="req" name="box_number" value="">

                        <!-- Checkbox Skin -->
                        <label class="checkbox fs-13 me-20">
                            <input type="checkbox" name="is_deprivation_command" class="check-toggle" value=""
                                data-target="options-1" date-requered="1">
                            <span>استلام أمانات النزيل من سجن سابق</span>
                        </label>


                    </div>
                    <!-- // Content -->
                </div>
                <!-- // Details Widget -->
            </div>
        </div>

        <!-- // Column -->
        <!-- Column -->
        <div class="col-12">
            <!-- Widget Block -->
            <div class="widget-block mb-30 safeties_containers 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 onclick="return false"
                        class="btn primary display-block square fas fa-plus tiny hidden btn_plush_deposit_money"
                        data-repeater-create="" tabindex="0" role="button" aria-pressed="false"></button>
                </h3>

                <label class="checkbox fs-13 pds-15">
                    <input type="checkbox" name="deposit_money_check" data-parent="deposit_money" class="check-toggle"
                        data-target="stopfrom" date-requered="1" value="1">
                    <span> مبالغ نقدية </span>
                </label>

                <div data-repeater-list="deposit_money">
                    @include('safety.deposit.inc.deposit_cash')
                    <!-- // Column -->
                    <!-- // Details Widget -->
                </div>
                <!-- Group Wrapper -->
                <!-- // Group Wrapper -->
            </div>
            <!-- // Widget Block -->
        </div>
        <div class="widget-block mb-30 safeties_containers 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 onclick="return false"
                    class="btn primary display-block square fas fa-plus tiny hidden btn_plush_deposit_corporeals"
                    data-repeater-create="" tabindex="0" role="button" aria-pressed="false"></button>

            </h3>
            <label class="checkbox fs-13 pds-15">
                <input type="checkbox" name="deposit_corporeals_check" data-parent="deposit_corporeals" class="check-toggle"
                    data-target="corporealsfrom" date-requered="1" value="2">
                <span> أمانة عينية </span>
            </label>
            <div data-repeater-list="deposit_corporeals">

                <!-- Widget Block -->
                @include('safety.deposit.inc.deposit_corporeals')
                <!-- // Column -->
            </div>

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

        <div class="col-12 col-md-6">
            <!--  -->
            <label for="" class="color-transparent">..</label>
            <button class="btn fluid primary">حفظ</button>
        </div>
        </div>


    </form>
@endsection
@section('script')
    <script src="{{ asset('assets/js/repate-inputs_old.js') }}"></script>
    <script>
        $(document).ready(function() {
            $(".btn_plush_deposit_money").hide();
            $("[name='deposit_money_check']").change(function() {
                // Toggle button visibility based on checkbox state
                if ($(this).is(":checked")) {
                    $(".btn_plush_deposit_money").show();
                } else {
                    $(".btn_plush_deposit_money").hide();
                }
            });
            $(document).on("change", ".deposit_money", function() {
                var closestPeopleInfo = $(this).closest('.row').find('.people_info');
                if ($(this).is(':checked')) {
                    // If checked, show the closest .people_info
                    closestPeopleInfo.show();
                } else {
                    // If unchecked, hide the closest .people_info
                    closestPeopleInfo.hide();
                }
            });

            $(".btn_plush_deposit_corporeals").hide();
            $("[name='deposit_corporeals_check']").change(function() {
                // Toggle button visibility based on checkbox state
                if ($(this).is(":checked")) {
                    $(".btn_plush_deposit_corporeals").show();
                } else {
                    $(".btn_plush_deposit_corporeals").hide();
                }
            });
            $(document).on("change", ".deposit_corporeals", function() {
                var closestCorporealsPeopleInfo = $(this).closest('.row').find('.corporeals_people_info');
                if ($(this).is(':checked')) {
                    // If checked, show the closest .corporeals_people_info
                    closestCorporealsPeopleInfo.show();
                } else {
                    // If unchecked, hide the closest .corporeals_people_info
                    closestCorporealsPeopleInfo.hide();
                }
            });
        });
    </script>
@endsection