@extends('layouts.app')

@section('content')

    <form action="{{ route('financial_rewards.quran_memorizing_reward_movement.update', $quran_memorizing_reward_movement->id) }}" class="col col-lg-9 pd-30" id="form_request_ajax" method="POST">
        @csrf
        @method('PUT')

        <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>

        <div class="page-title divider-b pdb-10 flexbox align-between align-center-y mb-20">
            <h1 class="reset-block lineheight-130 fs-20">
                اخر مسير منشىء بتاريخ  :
                <span class="primary-color">{{ optional($last_movement_date)->to_year }} - {{ optional($last_movement_date)->to_month }}</span>
            </h1>
        </div>

        <div class="row">
            <div class="col-12 col-md-6">

                <div class="widget-block mb-30 white-bg radius-g pdb-5 form-ui gray-form">

                    <h3 class="far fa-angle-up widget-title fs-15 pdx-20 pdy-10 medium-weight mb-20">من تاريخ</h3>

                    <div class="widget-content pdx-20">
                        <div class="row align-center-y">

                            <div class="col-12 col-lg-6 mb-15">
                                <label class=" mb-5">سنة</label>
                                <div class="" style="position: relative;">
                                    <input type='text' name="from_year" id="from_year" class="req gregorian-year-input" autocomplete="off"  value="{{ $quran_memorizing_reward_movement->from_year }}" />
                                </div>
                            </div>

                            <div class="col-12 col-lg-6 mb-15">
                                <label class=" mb-5">شهر</label>
                                <div class="" style="position: relative;">
                                    <input type='text' name="from_month" id="from_month" class="req" autocomplete="off" value="{{ $quran_memorizing_reward_movement->from_month }}" />
                                </div>
                            </div>

                        </div>

                    </div>
                </div>
            </div>

            <div class="col-12 col-md-6">
                <div class="widget-block mb-30 white-bg radius-g pdb-5 form-ui gray-form">

                    <h3 class="far fa-angle-up widget-title fs-15 pdx-20 pdy-10 medium-weight mb-20">إلى تاريخ</h3>

                    <div class="widget-content pdx-20">
                        <div class="row align-center-y">

                            <div class="col-12 col-lg-6 mb-15">
                                <label class=" mb-5">سنة</label>
                                <div class="" style="position: relative;">
                                    <input type='text' name="to_year" id="to_year" class="req gregorian-year-input" autocomplete="off" autofocus="off" value="{{ $quran_memorizing_reward_movement->to_year }}" />
                                </div>
                            </div>

                            <div class="col-12 col-lg-6 mb-15">
                                <label class=" mb-5">شهر</label>
                                <div class="" style="position: relative;">
                                    <input type='text' name="to_month" id="to_month" class="req" autocomplete="off" autofocus="off" value="{{ $quran_memorizing_reward_movement->to_month }}" />
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>


        </div>
    </form>
@endsection

@section('script')
    <script>
       $(document).ready(function () {

        $("#from_month").on("click focusout", function () {
            $(this).hijriDatePicker({
                format: "MM",
                viewMode: 'months',
                showClose: true,
                showTodayButton: false,
                showClear: true,
                showSwitcher: false,
                debug: true,
            });
        });

        $("#to_month").on("click focusout", function () {
            $(this).hijriDatePicker({
                format: "MM",
                viewMode: 'months',
                showClose: true,
                showTodayButton: false,
                showClear: true,
                showSwitcher: false,
                debug: true,
            });
        });
    });

    </script>
@endsection