@extends('app-new')

@push('head-script')
    <!-- BEGIN: Vendor CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/forms/wizard/bs-stepper.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/flatpickr/flatpickr.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/pickadate/pickadate.css">
    <!-- END: Vendor CSS-->

    <!-- BEGIN: Page CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-validation.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/core/menu/menu-types/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-wizard.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-pickadate.css">
    <!-- END: Page CSS-->
@endpush

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">Leave Rule</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{'/home' }}">Home</a>
                    </li>
                    <li class="breadcrumb-item"><a href="{{'/leave-types' }}">Leave Rule</a>
                    </li>
                    <li class="breadcrumb-item active">
                        Add {{ $leaveType ? $leaveType->name : '' }} Rule
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')
    <!-- Basic multiple Column Form section start -->
    <section id="chartjs-chart">
        <div class="row">
            <div class="col-md-12 col-12">
                <div class="card  new-cardbox">

                    <ul class="nav nav-tabs border-bottom" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link" href="{{ "/leave-types/$leaveType->id/edit" }}" target="_blank">Leave
                                Type</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active" data-bs-toggle="tab" href="#Credit">Credit Rule</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link disabled" data-bs-toggle="tab" href="#Debit">Debit Rule</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link disabled" data-bs-toggle="tab" href="#Access">Access Rule</a>
                        </li>
                    </ul>

                    @if ($leaveType)
                        <div class="tab-content">
                            <div class="tab-pane active" id="Credit">
                                <form role="post-data" method="POST" action="{{'/leave-rule-store' }}"
                                    fredirect="{{'/leave-rule-edit/' }}">
                                    <input type="hidden" name="organization_id" value="{{ $organization->id }}">
                                    <input type="hidden" name="leave_type_id" value="{{ $leaveType->id }}">
                                    <div class="row">
                                        <div class="col-md-4 border-end">
                                            <div class="formheadpad">
                                                <div class="card-header newheader border-bottom mb-1">
                                                    <h4 class="card-title">Allocation Rule </h4>
                                                </div>
                                                <div class="card-body">
                                                    <div class="row">
                                                        <div class="col-md-12">
                                                            <div class="mb-1">
                                                                <label class="form-label">Rule Name <span
                                                                        class="text-danger">*</span></label>
                                                                <input type="text" class="form-control"
                                                                    placeholder="Enter Rule Name" name="rule_name">
                                                            </div>

                                                            <div class="mb-1">
                                                                <label class="form-label">Allocation Type <span
                                                                        class="text-danger">*</span></label>
                                                                <select class="form-select" name="allocation_type"
                                                                    id="allocation_type">
                                                                    <option value="">Please Select</option>
                                                                    @foreach ($allocationTypes as $allocationType)
                                                                        <option value="{{ $allocationType }}"
                                                                            data-allocationtype="{{ $allocationType }}">
                                                                            {{ ucfirst($allocationType) }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>

                                                            <div class="mb-1 hidden" id="allocation_value">
                                                                <label class="form-label">Working Days <span
                                                                        class="text-danger">*</span></label>
                                                                <input type="number" class="form-control"
                                                                    placeholder="Enter Working Days"
                                                                    name="allocation_value" id="allocation_value" min="0" oninput="this.value = this.value < 0 ? '' : this.value;">
                                                                <label class="form-label text-end"
                                                                    for="is_complete_month"><input type="checkbox"
                                                                        name="is_complete_month" value="1"
                                                                        id="is_complete_month"> Is Complete Month</label>
                                                            </div>

                                                            <div class="mb-1">
                                                                <label class="form-label">Allocation Leave <span
                                                                        class="text-danger">*</span></label>
                                                                <input type="text" class="form-control"
                                                                    placeholder="Enter Leave" name="allocation_leave"
                                                                    oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/^(\d*\.\d*)\./, '$1');">
                                                            </div>

                                                            <div class="mb-1">
                                                                <label class="form-label">Max Leave </label>
                                                                <input type="text" class="form-control"
                                                                    placeholder="Enter Max Leave" name="credit_max_year"
                                                                    oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/^(\d*\.\d*)\./, '$1');">
                                                            </div>
                                                            <div class="mb-1">
                                                                <label class="form-label">Max Opening Leave </label>
                                                                <input type="number"  class="form-control"
                                                                    placeholder="Enter Opening Leave"
                                                                    name="opening_leaves"
                                                                    oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/^(\d*\.\d*)\./, '$1');"
                                                                    >
                                                            </div>
                                                            <div class="mb-1">
                                                                <label class="form-label">Joining Period (In Days) </label>
                                                                <input type="number" class="form-control"
                                                                    placeholder="Enter Joining Period (In Days)"
                                                                    name="joining_period_days" min="0" oninput="this.value = this.value < 0 ? '' : this.value;">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>

                                        </div>

                                        @if ($leaveType->is_carryforward == '1')
                                            <div class="col-md-4 border-end">
                                                <div class="formheadpad">
                                                    <div class="card-header newheader border-bottom mb-1">
                                                        <h4 class="card-title">Carry Forward Rule</h4>
                                                    </div>
                                                    <div class="card-body">
                                                        <div class="row">
                                                            <div class="col-md-12">
                                                                <div class="mb-1">
                                                                    <label class="form-label">Min Leave <span
                                                                            class="text-danger">*</span></label>
                                                                    <input type="text" class="form-control"
                                                                        placeholder="Enter Min Leave"
                                                                        name="min_carryforward">
                                                                </div>
                                                                <div class="mb-1">
                                                                    <label class="form-label">Max Leave <span
                                                                            class="text-danger">*</span></label>
                                                                    <input type="text" class="form-control"
                                                                        placeholder="Enter Max Leave"
                                                                        name="max_carryforward">
                                                                </div>


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

                                            </div>
                                        @endif

                                        @if ($leaveType->is_comp_off == '1')
                                            <div class="col-md-4 border-end">
                                                <div class="formheadpad">
                                                    <div class="card-header newheader border-bottom mb-1">
                                                        <h4 class="card-title">Comp Off Rule</h4>
                                                    </div>
                                                    <div class="card-body">
                                                        <div class="row">
                                                            <div class="col-md-6">
                                                                <div class="mb-1">
                                                                    <label class="form-label">Comp Off Validity
                                                                        Type</label>
                                                                    <select class="form-select"
                                                                        name="comp_off_validity_type"
                                                                        id="comp_off_validity_type">
                                                                        <option value="days">Days </option>
                                                                        <option value="months">Months </option>
                                                                        <option value="years">Years </option>
                                                                    </select>
                                                                </div>
                                                            </div>

                                                            <div class="col-md-6">
                                                                <div class="mb-1">
                                                                    <label class="form-label">Comp Off Validity</label>
                                                                    <input type="text" class="form-control"
                                                                        placeholder="Enter Comp Off Validity"
                                                                        name="comp_off_validity">
                                                                    <label class="form-label text-end"
                                                                        for="is_validity_complete"
                                                                        id="is_validity_complete_label"
                                                                        style="display:none">
                                                                        <input type="checkbox" name="is_validity_complete"
                                                                            value="1" id="is_validity_complete">
                                                                        Is Complete
                                                                    </label>
                                                                </div>
                                                            </div>

                                                            @if ($compOffPolicy == 'working_hrs_policy')
                                                                <div class="col-md-12">
                                                                    <div class="mb-1">
                                                                        <label class="form-label">Working Hrs</label>
                                                                        <input type="time" class="form-control"
                                                                            placeholder="Enter Working Hrs"
                                                                            name="working_hours">
                                                                    </div>
                                                                </div>

                                                                <div class="col-md-12">
                                                                    <div class="mb-1">
                                                                        <label class="form-label">Entitlement (in
                                                                            Days)</label>
                                                                        <input type="text"
                                                                            class="form-control decimal-only"
                                                                            placeholder="Enter Entitlement Days"
                                                                            name="entitlement_days">
                                                                    </div>
                                                                </div>

                                                                <div class="col-md-12">
                                                                    <div class="mb-1">
                                                                        <label class="form-label">Capping (Per
                                                                            Month)</label>
                                                                        <input type="text"
                                                                            class="form-control numberonly"
                                                                            placeholder="Enter Capping Per Month"
                                                                            name="capping_per_month">
                                                                    </div>
                                                                </div>
                                                            @else
                                                                <div class="col-md-12">
                                                                    <div class="mb-1">
                                                                        <label class="form-label">Min Working Hrs</label>
                                                                        <input type="time" class="form-control"
                                                                            placeholder="Enter Min Working Hrs"
                                                                            name="min_working_hours">
                                                                    </div>
                                                                </div>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endif

                                        @if ($leaveType->is_cashable == '1')
                                            <div class="col-md-4">
                                                <div class="formheadpad">
                                                    <div class="card-header newheader border-bottom mb-1">
                                                        <h4 class="card-title">Encash Rule</h4>
                                                    </div>
                                                    <div class="card-body">
                                                        <div class="row">
                                                            <div class="col-md-12">
                                                                <div class="mb-1">
                                                                    <label class="form-label">Min Leave <span
                                                                            class="text-danger">*</span></label>
                                                                    <input type="text" class="form-control"
                                                                        placeholder="Enter Min Leave" name="min_cashable">
                                                                </div>
                                                                <div class="mb-1">
                                                                    <label class="form-label">Max Leave <span
                                                                            class="text-danger">*</span></label>
                                                                    <input type="text" class="form-control"
                                                                        placeholder="Enter Max Leave" name="max_cashable">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                        <div class="col-12">
                                            <div class="card-body pt-0">
                                                <button type="reset" onclick="this.form.reset()"
                                                    class="btn btn-outline-secondary me-1 waves-effect">Reset</button>
                                                <button type="button" data-request="ajax-submit"
                                                    data-target="[role=post-data]"
                                                    class="btn btn-primary waves-effect waves-float waves-light">Submit</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    @else
                        <div class="alert alert-warning alert-dismissible fade show" role="alert">
                            <strong>Leave type not found.</strong>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </section>


    <!-- Basic Floating Label Form section end -->
@endsection

@push('footer-script')
    <!-- BEGIN: Page Vendor JS-->
    <script src="/app-assets/vendors/js/forms/wizard/bs-stepper.min.js"></script>
    <script src="/app-assets/vendors/js/forms/select/select2.full.min.js"></script>
    <script src="/app-assets/vendors/js/forms/validation/jquery.validate.min.js"></script>
    <script src="/app-assets/vendors/js/pickers/flatpickr/flatpickr.min.js"></script>
    <script src="/app-assets/vendors/js/pickers/pickadate/picker.js"></script>
    <script src="/app-assets/vendors/js/pickers/pickadate/picker.date.js"></script>
    <script src="/app-assets/vendors/js/pickers/pickadate/picker.time.js"></script>
    <script src="/app-assets/vendors/js/pickers/pickadate/legacy.js"></script>
    <!-- END: Page Vendor JS-->

    <!-- BEGIN: Page JS-->
    <script src="/app-assets/js/scripts/forms/form-wizard.js"></script>
    <script src="/app-assets/js/scripts/forms/form-validation.js"></script>
    <script src="/app-assets/js/scripts/forms/pickers/form-pickers.js"></script>
    <!-- END: Page JS-->

    <script src="{{ asset('js/common-script.js') }}"></script>
    <script src="{{ asset('js/sweetalert.js') }}"></script>

    <script>
        $(function() {
            $('#LeaveType input, #LeaveType select').attr('disabled', true);
        });

        $("#frequency").change(function() {
            var frequency = $(this).find(":selected").data("frequency");
            if (frequency != 'Custom') {
                $("#month").addClass('hidden');
            } else {
                $("#month").removeClass('hidden');

            }
        });

        $("#allocation_type").change(function() {
            var allocationType = $(this).find(":selected").data("allocationtype");
            if (allocationType == 'fixed') {
                $("#allocation_value").attr('disabled', true);
                $("#allocation_value").addClass('hidden');
            } else {
                $("#allocation_value").attr('disabled', false);
                $("#allocation_value").removeClass('hidden');
            }
        });

        $('#comp_off_validity_type').change(function() {
            if ($(this).val() != 'days') {
                $('#is_validity_complete_label input').prop('disabled', false);
                $('#is_validity_complete_label').show();
            } else {
                $('#is_validity_complete_label input').prop('disabled', true);
                $('#is_validity_complete_label').hide();
            }
        });
    </script>
@endpush