@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">{{ trans('master/master.canteen_rules') }}</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ url("$alias/home") }}">
                        {{trans('master/master.home')}}</a>
                    </li>
                    <li class="breadcrumb-item">
                        <a href="{{ url("$alias/canteen/rules") }}">{{ trans('master/master.canteen_rules') }}</a>
                    </li>
                    <li class="breadcrumb-item active">
                        @if(isset($canteenRule->id))
                            {{trans('common/common.edit')}}
                        @else
                            {{trans('master/master.add_new')}}
                        @endif
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')
    <!-- Basic multiple Column Form section start -->
    
    <form role="post-data" method="POST" 
    action="@if (isset($canteenRule) && $canteenRule){{ $orgUrl.'/canteen/rule/update/'.$canteenRule->id }}@else{{ $orgUrl.'/canteen/rule/store' }}@endif " redirect="{{ $orgUrl.'/canteen/rules' }}">
    
        @if(isset($canteenRule->id))
            <input type="hidden" name="_method" value="PUT">
        @endif
        <section id="multiple-column-form">
            <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">{{trans('master/master.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-6 mb-1">
                                            <label class="form-label">{{trans('master/master.title')}} <span class="mendatory-field text-danger">*</span></label>
                                            <input type="text" name="title" value="{{ isset($canteenRule) && $canteenRule ? $canteenRule->title : '' }}" class="form-control">
                                        </div>
                                        <div class="col-md-6 mb-1">
                                            <label class="form-label">{{trans('master/master.satled_to')}}</label>
                                            <select class="form-control select2" name="settled_to" >
                                                <option value="">--select--</option>
                                                @foreach($payrollCompontTypes as $payrollCompontType)
                                                    <option value="{{$payrollCompontType->id}}" @if(isset($canteenRule) && $canteenRule->settled_to == $payrollCompontType->id) selected @endif>{{$payrollCompontType->name}} </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="canteen-attribute-box">
                                        
                                        @if(isset($canteenRule) && $canteenRule->canteenRuleAttributes->isNotEmpty())
                                            @foreach($canteenRule->canteenRuleAttributes as $key=>$canteenRuleAttribute)
                                            
                                            <div class="row canteen-attribute">
                                                <div class="col-md-3 mb-1">
                                                    <label class="form-label">{{trans('master/master.min_attendance_days')}} <span class="mendatory-field text-danger">*</span></label>
                                                    <input type="text" name="canteen_attribute[{{$key}}][min_attendance_days]"  value="{{ isset($canteenRuleAttribute) && $canteenRuleAttribute ? $canteenRuleAttribute->min_attendance_days : '' }}" class="form-control decimal-only in-min-attendance-days">
                                                </div>
                                                <div class="col-md-3 mb-1">
                                                    <label class="form-label">{{trans('master/master.max_attendance_days')}} <span class="mendatory-field text-danger">*</span></label>
                                                    <input type="text" name="canteen_attribute[{{$key}}][max_attendance_days]"  value="{{ isset($canteenRuleAttribute) && $canteenRuleAttribute ? $canteenRuleAttribute->max_attendance_days : '' }}" class="form-control decimal-only in-max-attendance-days">
                                                </div>
                                                <div class="col-md-4 mb-1">
                                                    <label class="form-label">{{trans('master/master.deduction_amount')}} <span class="mendatory-field text-danger">*</span></label>
                                                    <input type="text" name="canteen_attribute[{{$key}}][deduction_amount]"  value="{{ isset($canteenRuleAttribute) && $canteenRuleAttribute ? $canteenRuleAttribute->deduction_amount : '' }}" class="form-control decimal-only in-amount">
                                                </div>
                                                @if($key)
                                                    <div class="col-md-2 mb-1">
                                                        <button type="button" class="btn btn-icon round btn-danger waves-effect remove-canteen-attribute mt-2">Remove</button>
                                                    </div>
                                                    
                                                @else
                                                    <div class="col-md-2 mb-1">
                                                        <button type="button" class="btn btn-icon round btn-success waves-effect add-canteen-attribute mt-2">Add More</button>
                                                    </div>
                                                @endif
                                                
                                            </div>
                                            @endforeach
                                        @else    
                                            <div class="row canteen-attribute">
                                                <div class="col-md-3 mb-1">
                                                    <label class="form-label">{{trans('master/master.min_attendance_days')}} <span class="mendatory-field text-danger">*</span></label>
                                                    <input type="text" name="canteen_attribute[0][min_attendance_days]"  value="" class="form-control decimal-only in-min-attendance-days">
                                                </div>
                                                <div class="col-md-3 mb-1">
                                                    <label class="form-label">{{trans('master/master.max_attendance_days')}} <span class="mendatory-field text-danger">*</span></label>
                                                    <input type="text" name="canteen_attribute[0][max_attendance_days]"  value="" class="form-control decimal-only in-max-attendance-days">
                                                </div>
                                                <div class="col-md-4 mb-1">
                                                    <label class="form-label">{{trans('master/master.deduction_amount')}} <span class="mendatory-field text-danger">*</span></label>
                                                    <input type="text" name="canteen_attribute[0][deduction_amount]"  value="" class="form-control decimal-only in-amount">
                                                </div>
                                                
                                                <div class="col-md-2 mb-1">
                                                    <button type="button" class="btn btn-icon round btn-success waves-effect add-canteen-attribute mt-2">Add More</button>
                                                </div>
                                            </div>
                                        @endif 
                                    </div>   


                                    <div class="col-md-12">
                                        <div class="d-flex justify-content-between content-footer">
                                            <button type="button" data-request="ajax-submit" data-target="[role=post-data]" class="btn btn-success btn-submit user-submit" id="submit-text">{{trans('common/common.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="statusRadio1" name="status"
                                        class="form-check-input"  value="active" {{ isset($canteenRule) && $canteenRule->status != 'active'? 'checked' : 'checked' }}>
                                    <label class="form-check-label fw-bolder"
                                        for="customColorRadio1">Active</label>
                                </div>
                                <div class="form-check form-check-primary">
                                    <input type="radio" id="statusRadio2" name="status"
                                        class="form-check-input" value="inactive" {{ isset($canteenRule) && $canteenRule->status == 'inactive'? 'checked' : '' }}>
                                    <label class="form-check-label fw-bolder"
                                        for="customColorRadio2">Inactive</label>
                                </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>
        $(document).ready(function() {
            $("body").on("click",".add-canteen-attribute",function(){ 
                var html = '<div class="row canteen-attribute"><div class="col-md-3 mb-1"><label class="form-label">{{trans('master/master.min_attendance_days')}} <span class="mendatory-field text-danger">*</span></label><input type="text" name="canteen_attribute[0][min_attendance_days]"  value="" class="form-control in-min-attendance-days decimal-only"> </div><div class="col-md-3 mb-1"><label class="form-label">{{trans('master/master.max_attendance_days')}} <span class="mendatory-field text-danger">*</span></label><input type="text" name="cantteen_attribute[0][max_attendance_days]"  value="" class="form-control in-max-attendance-days decimal-only"> </div><div class="col-md-4 mb-1"><label class="form-label">{{trans('master/master.deduction_amount')}} <span class="mendatory-field text-danger">*</span></label><input type="text" name="canteen_attribute[0][deduction_amount]"  value="" class="form-control decimal-only in-amount"> </div><div class="col-md-2 mb-1"><button type="button" class="btn btn-icon round btn-danger waves-effect remove-canteen-attribute mt-2">Remove</button></div></div>';
                $(".canteen-attribute-box").append(html);

                $(".canteen-attribute").each(function(index,element) {
                    $(this).find('.in-min-attendance-days').attr('name', 'canteen_attribute['+index+'][min_attendance_days]');
                    $(this).find('.in-max-attendance-days').attr('name', 'canteen_attribute['+index+'][max_attendance_days]');
                    $(this).find('.in-amount').attr('name', 'canteen_attribute['+index+'][deduction_amount]');
                });
            });

            $("body").on("click",".remove-canteen-attribute",function(){ 
                $(this).parents(".canteen-attribute").remove();
            });
        });
    </script>
@endpush