@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 Type</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ $orgUrl . '/home' }}">Home</a>
                    </li>
                    <li class="breadcrumb-item"><a href="{{ $orgUrl . '/leave-types' }}">Leave Type</a>
                    </li>
                    <li class="breadcrumb-item active">
                        Add Leave Type
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')
    <!-- Basic multiple Column Form section start -->
    {{-- @php

dd($orgUrl);
@endphp --}}
    <form role="post-data" method="POST" action="{{ $orgUrl . '/leave-type-store' }}"
        fredirect="{{ $orgUrl . '/leave-rule-add/' }}">
        <input type="hidden" name="organization_id" value="{{ $organization->id }}">
        <section id="multiple-column-form">
            <div class="row">
                <div class="col-md-12">
                    <div class="card new-cardbox p-1">
                        <div class="row">
                            <div class="col-md-9 border-end">
                                <div class="card-header newheader border-bottom mb-1 px-0">
                                    <h4 class="card-title">Fill the below Information </h4>
                                </div>
                                <div class="card-body px-0">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="row">
                                                <div class="col-md-4">
                                                    <div class="mb-1">
                                                        <label class="form-label">Leave Type <span
                                                                class="text-danger">*</span></label>
                                                        <input type="text" name="name" class="form-control"
                                                            placeholder="Enter Name">
                                                    </div>
                                                </div>

                                                <div class="col-md-4">
                                                    <div class="mb-1">
                                                        <label class="form-label">Alias <span
                                                                class="text-danger">*</span></label>
                                                        <input type="text" name="alias" class="form-control"
                                                            oninput="this.value = this.value.toUpperCase()"
                                                            placeholder="Enter Alias">
                                                    </div>
                                                </div>

                                                <div class="col-md-4 col-12">
                                                    <div class="mb-1">
                                                        <label class="form-label">Gender <span
                                                                class="text-danger">*</span></label>
                                                        <select class="form-select select2" name="gender">
                                                            <option value=" ">Please Select</option>
                                                            @foreach ($genders as $gender)
                                                                <option value="{{ $gender }}">
                                                                    {{ ucfirst($gender) }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="col-md-4 col-12">
                                                    <div class="mb-1">
                                                        <label class="form-label">Attachment <span
                                                                class="text-danger">*</span></label>
                                                        <select class="form-select select2" name="is_attachment">
                                                            <option value=" ">Please Select</option>
                                                            @foreach ($attachments as $attachment)
                                                                <option value="{{ $attachment }}">
                                                                    {{ ucfirst($attachment) }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="col-md-4 col-12">
                                                    <div class="mb-1">
                                                        <label class="form-label">Leave Without Pay <span
                                                                class="text-danger">*</span></label>
                                                        <select class="form-select select2" name="is_leave_without_pay">
                                                            <option value=" ">Please Select</option>
                                                            @foreach ($attachments as $attachment)
                                                                <option value="{{ $attachment }}">
                                                                    {{ ucfirst($attachment) }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-4 col-12">
                                                    <div class="mb-1">
                                                        <label class="form-label">Frequency <span
                                                                class="text-danger">*</span></label>
                                                        <select class="form-select select2" name="frequency"
                                                            id="frequency">
                                                            <option value=" ">Please Select</option>
                                                            @foreach ($frequency as $frequency)
                                                                <option value="{{ $frequency }}"
                                                                    data-frequency="{{ $frequency }}">
                                                                    {{ ucfirst($frequency) }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-4 col-12 hidden" id="month">
                                                    <div class="mb-1">
                                                        <label class="form-label">Month<span
                                                                class="text-danger">*</span></label>
                                                        <select class="select2 form-select" multiple name="months[]"
                                                            data-placeholder="Select Month">
                                                            @foreach ($months as $month)
                                                                <option value="{{ $month }}">
                                                                    {{ $month }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="mb-1">
                                                        <label class="form-label">Leave Apply Min Days </label>
                                                        <input type="number" class="form-control"
                                                            placeholder="Enter Leave Apply Min Days"
                                                            name="leave_apply_min_days" min='0'
                                                            oninput="this.value = this.value < 0 ? '' : this.value;">
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="mb-1">
                                                        <label class="form-label">Leave Apply Max Days </label>
                                                        <input type="number" class="form-control"
                                                            placeholder="Enter Leave Apply Max Days"
                                                            name="leave_apply_max_days" min="0"
                                                            oninput="this.value = this.value < 0 ? '' : this.value;">
                                                    </div>
                                                </div>

                                                <div class="col-md-4 col-12">
                                                    <div class="mb-1">
                                                        <label class="form-label">Is Auto CRON <span
                                                                class="text-danger">*</span></label>
                                                        <select class="form-select" name="is_auto_cron">
                                                            <option value="1">Yes</option>
                                                            <option value="0">No</option>
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="col-md-4 maximum-short-hour" style="display:none">
                                                    <div class="mb-1">
                                                        <label class="form-label">Maximum Short Hour <span
                                                                class="text-danger">*</span></label>
                                                        <input type="time" class="form-control"
                                                            placeholder="Enter Maximum Short Hour"
                                                            name="maximum_short_hour">
                                                    </div>
                                                </div>
                                                <div class="col-md-4 maximum-short-hour" style="display:none">
                                                    <div class="mb-1">
                                                        <label class="form-label">Is Hourly Leave <span
                                                                class="text-danger">*</span></label>
                                                        <select class="form-select" name="is_hourly_leave">
                                                            <option value="0">No</option>
                                                            <option value="1">Yes</option>
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="col-md-4 is_comp_off" style="display:none">
                                                    <div class="mb-1">
                                                        <label class="form-label">Comp Off Selection</label>
                                                        <select class="form-select" name="comp_off_selection">
                                                            <option value="automatic">Automatic</option>
                                                            <option value="manual">Manual</option>
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="col-md-4 is_comp_off" style="display:none">
                                                    <div class="mb-1">
                                                        <label class="form-label">Capping Per Month (By Count)</label>
                                                        <input type="text" class="form-control"
                                                            placeholder="Enter Capping Per Month" name="capping_per_month"
                                                            value="">
                                                    </div>
                                                </div>

                                                <div class="col-md-4 is_comp_off" style="display:none">
                                                    <div class="mb-1">
                                                        <label class="form-label">Capping Per Month (By Day Count)</label>
                                                        <input type="text" class="form-control"
                                                            placeholder="Enter Capping Per Month" name="capping_per_month_day_count"
                                                            value="">
                                                    </div>
                                                </div>

                                                <div class="col-md-4 is_auto_approval_div" style="display:none">
                                                    <div class="mb-1">
                                                        <label class="form-label">Auto Approval Days</label>
                                                        <input type="text" class="form-control"
                                                            placeholder="Enter Auto Approval Days"
                                                            name="auto_approval_days">
                                                    </div>
                                                </div>

                                                <div class="col-md-12 col-12 demo-inline-spacing">
                                                    <h6><strong>Leave Reset</strong></h6>
                                                    <div class="form-check form-check-primary">
                                                        <input type="radio" class="form-check-input" id="ResetOff"
                                                            name="reset_yearly" value="0">
                                                        <label class="form-check-label fw-bolder" for="ResetOff">
                                                            Off</label>
                                                    </div>
                                                    <div class="form-check form-check-primary">
                                                        <input type="radio" class="form-check-input" id="ResetYearly"
                                                            name="reset_yearly" value="1">
                                                        <label class="form-check-label fw-bolder"
                                                            for="ResetYearly">Yearly</label>
                                                    </div>
                                                    <div class="form-check form-check-primary">
                                                        <input type="radio" class="form-check-input"
                                                            id="ResetFinYearly" name="reset_yearly" value="2">
                                                        <label class="form-check-label fw-bolder"
                                                            for="ResetFinYearly">Fin. Yearly</label>
                                                    </div>
                                                </div>

                                                <div class="col-md-12 col-12 demo-inline-spacing">
                                                    <div class="form-check form-check-secondary mt-1">
                                                        <input type="checkbox" class="form-check-input" id="Carry"
                                                            name="is_carryforward" value="1">
                                                        <label class="form-check-label fw-bolder" for="Carry">Carry
                                                            Forward</label>
                                                    </div>

                                                    <div class="form-check form-check-secondary mt-1">
                                                        <input type="checkbox" class="form-check-input" id="Cashable"
                                                            name="is_cashable" value="1">
                                                        <label class="form-check-label fw-bolder"
                                                            for="Cashable">Encashable</label>
                                                    </div>

                                                    <div class="form-check form-check-secondary mt-1">
                                                        <input type="checkbox" class="form-check-input" id="is_comp_off"
                                                            name="is_comp_off" value="1">
                                                        <label class="form-check-label fw-bolder" for="is_comp_off">Is
                                                            Comp. Off</label>
                                                    </div>

                                                    <div class="form-check form-check-secondary mt-1">
                                                        <input type="checkbox" class="form-check-input"
                                                            id="is-short-leave" name="is_short_leave" value="1">
                                                        <label class="form-check-label fw-bolder" for="is-short-leave">Is
                                                            Short Leave</label>
                                                    </div>

                                                    <div class="form-check form-check-secondary mt-1">
                                                        <input type="checkbox" class="form-check-input" id="is_restricted_holiday" name="is_restricted_holiday" value="1">
                                                        <label class="form-check-label fw-bolder" for="is_restricted_holiday">Is Restricted Holiday</label>
                                                    </div>

                                                    <div class="form-check form-check-secondary mt-1">
                                                        <input type="checkbox" class="form-check-input"
                                                            id="is_auto_approval" name="is_auto_approval" value="1">
                                                        <label class="form-check-label fw-bolder"
                                                            for="is_auto_approval">Is Auto Approval</label>
                                                    </div>
                                                    <div class="form-check form-check-secondary mt-1">
                                                        <input type="checkbox" class="form-check-input"
                                                            id="is_quarter_leave_allowed" name="is_quarter_leave_allowed"
                                                            value="1">
                                                        <label class="form-check-label fw-bolder"
                                                            for="is_quarter_leave_allowed">Is Quarter Leave Allowed</label>
                                                    </div>

                                                    <div class="form-check form-check-secondary mt-1">
                                                        <input type="checkbox" class="form-check-input"
                                                            id="is_half_day_leave_allowed" name="is_half_day_leave_allowed"
                                                            value="1" checked>
                                                        <label class="form-check-label fw-bolder"
                                                            for="is_half_day_leave_allowed">Is Half Day Leave Allowed</label>
                                                    </div>
                                                </div>


                                                <div class="col-12 mt-3">
                                                    <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>
                                    </div>

                                </div>

                            </div>

                            <div class="col-md-3">
                                <div class="card-header newheader border-bottom mb-1 px-0">
                                    <h4 class="card-title">Status</h4>
                                </div>
                                <div class="card-body px-0">
                                    <div>
                                        <div class="form-check form-check-primary mb-2">
                                            <input type="radio" id="customColorRadio1" name="status"
                                                class="form-check-input" checked="" value="active">
                                            <label class="form-check-label fw-bolder"
                                                for="customColorRadio1">Active</label>
                                        </div>
                                        <div class="form-check form-check-primary">
                                            <input type="radio" id="customColorRadio2" name="status"
                                                class="form-check-input" value="inactive">
                                            <label class="form-check-label fw-bolder"
                                                for="customColorRadio2">Inactive</label>
                                        </div>
                                    </div>
                                </div>

                            </div>

                        </div>

                    </div>



                </div>


            </div>
        </section>

    </form>
    <!-- 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>
        $("#frequency").change(function() {
            var frequency = $(this).find(":selected").data("frequency");
            if (frequency != 'Custom') {
                $("#month").addClass('hidden');
            } else {
                $("#month").removeClass('hidden');

            }
        });

        $("#is-short-leave").change(function() {
            if (this.checked) {
                $(".maximum-short-hour").show();
            } else {
                $(".maximum-short-hour").hide();
            }
        });

        $("#is_auto_approval").change(function() {
            if (this.checked) {
                $(".is_auto_approval_div").show();
            } else {
                $(".is_auto_approval_div").hide();
            }

        });

        $("#is_comp_off").change(function() {
            if (this.checked) {
                $(".is_comp_off").show();
            } else {
                $(".is_comp_off").hide();
            }
        });
    </script>
@endpush