@extends('layouts.app')

{{-- Important Variables --}}


@section('title')
    {{ $moduleName }}->{{ $createItemName }}
@stop

@section('top-bar')
    @include('includes.top-bar')
@stop
@section('left-sidebar')
    @include('includes.hrm-left-sidebar')
@stop
@section('content')

    <style>
        .small {
            font-size: 1.3rem;
        }
    </style>

    <section class="content">
        <div class="container-fluid">

            <ol class="breadcrumb breadcrumb-col-cyan pull-left">
                <li><a href="{{ route('hrm.dashboard') }}"><i class="material-icons">home</i> {{__('lang.home')}}</a></li>
                <li><a href="{{ route($ParentRouteName) }}"> <i
                            class="material-icons">settings</i>{{ $breadcrumbMainName }}</a></li>
                <li class="active"><i class="material-icons">{{ $breadcrumbCurrentIcon }}</i> {{ $breadcrumbCurrentName }}
                </li>
            </ol>

            <!-- Inline Layout | With Floating Label -->
            <div class="row clearfix">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="card">
                        <div class="header">
                            <h2>
                                {{ $createItemName }}
                            </h2>
                            <br>
                            <div class="body">
                                <form class="form" id="form_validation" method="post"
                                    action="{{ route('hrm.system.update') }}">

                                    {{ csrf_field() }}
                                    <div class="row clearfix">
                                        <div class="col-md-12 col-sm-12 col-lg-12">
                                            <h4>{{__('lang.basic_settings')}}</h4>
                                        </div>
                                        

                                        <div class="row">
                                            <div class="col-md-12 col-sm-12 col-lg-12">
                                                <h4>{{__('lang.select_off_days_for_attendance')}}</h4>
                                            </div>
                                            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 field_area">
                                                {{-- <p>Show Discount</p> --}}
                                                <div class="form-group form-float">
                                                    <div class="form-line focused" id="bs_datepicker_container">
                                                        <select class="form-control show-tick" name="off_days[]" multiple
                                                            id="">
                                                            <option value="">{{__('lang.default_no_caps')}}</option>
                                                            <option value="1" {{ in_array('1', $settingDays) ? 'selected' : '' }}> Monday</option>
                                                            <option value="2" {{ in_array('2', $settingDays) ? 'selected' : '' }}> Tuesday</option>
                                                            <option value="3" {{ in_array('3', $settingDays) ? 'selected' : '' }}> Wednesday</option>
                                                            <option value="4" {{ in_array('4', $settingDays) ? 'selected' : '' }}> Thursday</option>
                                                            <option value="5" {{ in_array('5', $settingDays) ? 'selected' : '' }}> Friday</option>
                                                            <option value="6" {{ in_array('6', $settingDays) ? 'selected' : '' }}> Saturday</option>
                                                            <option value="7" {{ in_array('7', $settingDays) ? 'selected' : '' }}> Sunday</option>
                                                        </select>
                                                        {{-- <label class="form-label">{{__('lang.would_you_like_to_open_feature')}}</label> --}}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12 col-sm-12 col-lg-12">
                                                <h4>Select Timing for Attendance</h4>
                                            </div>
                                            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 field_area">
                                                {{-- <p>Show Discount</p> --}}
                                                <div class="form-group form-float">
                                                    <div class="form-line focused">
                                                        <input type="time" class="form-control" name="clock_in"  value="{{$clock_in}}"/>
                                                        <label class="form-label">Clock In</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 field_area">
                                                {{-- <p>Show Discount</p> --}}
                                                <div class="form-group form-float">
                                                    <div class="form-line focused">
                                                        <input type="time" class="form-control" name="clock_out"  value="{{$clock_out}}"/>
                                                        <label class="form-label">Clock Out</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 field_area">
                                                {{-- <p>Show Discount</p> --}}
                                                <div class="form-group form-float">
                                                    <div class="form-line focused">
                                                        <input type="number" class="form-control" name="working_hours"  value="{{$working_hours}}"/>
                                                        <label class="form-label">Working Hours</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                                <h4>{{ __('lang.late_and_halfday') }} </h4>
                                                <br>
                                                <div class="form-group form-float">
                                                    <label>{{ __('lang.enable') }}: </label>
                                                    <input name="enable_late_halfday" type="radio" id="enable_late_halfday_yes" value="1" @if ($enable_late_halfday == 1) checked @endif>
                                                    <label for="enable_late_halfday_yes" style="padding: 0px 25px;">{{ __('lang.enable') }}</label>
                                                    <input name="enable_late_halfday" type="radio" id="enable_late_halfday_no" value="0" @if ($enable_late_halfday == 0) checked @endif>
                                                    <label for="enable_late_halfday_no" style="padding: 0px 25px;">{{ __('lang.disable') }}</label>
                                                </div>
                                            </div>
                                        </div>

                                        <div id="late_halfday_div">
                                            <div class="row">
                                                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 field_area">
                                                    <div class="form-group form-float">
                                                        <div class="form-line focused">
                                                            <input type="number" class="form-control" name="mark_halfday_on"  value="{{$mark_halfday_on}}"/>
                                                            <label class="form-label">{{__('lang.mark_halfday_on')}}</label>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 field_area">
                                                    <div class="form-group form-float">
                                                        <div class="form-line focused">
                                                            <input type="number" class="form-control" name="absent_deduction_on_no_of_halfday"  value="{{$absent_deduction_on_no_of_halfday}}"/>
                                                            <label class="form-label">{{__('lang.absent_deduction_on_halfdays')}}</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">

                                                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 field_area">
                                                    <div class="form-group form-float">
                                                        <div class="form-line focused">
                                                            <input type="number" class="form-control" name="mark_late_on"  value="{{$mark_late_on}}"/>
                                                            <label class="form-label">{{__('lang.mark_late_on')}}</label>
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 field_area">
                                                    <div class="form-group form-float">
                                                        <div class="form-line focused">
                                                            <input type="number" class="form-control" name="absent_deduction_on_no_of_late"  value="{{$absent_deduction_on_no_of_late}}"/>
                                                            <label class="form-label">{{__('lang.absent_deduction_on_lates')}}</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="row">
                                            <div class="col-md-3 col-sm-4 col-lg-4">
                                                <h4>Deduct Amount on Working Hours</h4>
                                                <input type="radio" name="is_deduction" value="1" class="form-control" id="is_deduction_yes"
                                                @if($is_deduction) checked @endif />
                                                <label class="form-label" style="padding-right: 35px" for="is_deduction_yes">Yes</label>
                                                <input type="radio" name="is_deduction" value="0" class="form-control" id="is_deduction_no"
                                                @if($is_deduction == 0 || $is_deduction == null) checked @endif />
                                                <label class="form-label" for="is_deduction_no">No</label>
                                            </div>

                                        </div>
                                        <div class="row">
                                            <div class="col-md-6 col-sm-12 col-lg-6">
                                                <h4>Leaves Management</h4>
                                                
                                                <table class="table table-bordered">
                                                    <thead>
                                                        <tr>
                                                            <th width="8%">{{ __('lang.sno')}}</th>
                                                            <th>{{ __('lang.name')}}</th>
                                                            <th width="20%">{{ __('lang.no_of_leaves')}}</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @if(count($leave_types) == 0)
                                                            <tr>
                                                                <th colspan="100%" class="text-danger text-center">{{__('lang.there_has_no_data')}}</th>
                                                            </tr>
                                                        @endif
                                                        @foreach ($leave_types as $leave_type)
                                                            @php
                                                                $unique_key     = uniqid();
                                                                $name_prefix    = "leaves_data[$unique_key]";
                                                            @endphp
                                                            <tr>
                                                                <td>{{ $loop->iteration }}</td>
                                                                <td>{{ $leave_type->name}}</td>
                                                                <td>
                                                                    <input type="hidden" name="{{$name_prefix.'[leave_type_id]'}}" value="{{$leave_type->id}}">
                                                                    <input type="number" name="{{$name_prefix.'[no_of_leaves]'}}" value="{{$leave_type->no_of_leaves}}" class="form-control" >
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            </div>

                                        </div>
                                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                            <div class="form-line">
                                                <button type="submit" class="btn btn-primary m-t-15 waves-effect">
                                                    {{__('lang.update')}}
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </form>

                            </div>
                        </div>
                    </div>
                </div>
                <!-- #END# Inline Layout | With Floating Label -->
            </div>
        </div>
    </section>

@stop

@push('include-css')
    <!-- Colorpicker Css -->
    <link href="{{ loadAsset('asset/plugins/bootstrap-colorpicker/css/bootstrap-colorpicker.css') }}" rel="stylesheet" />

    <!-- Dropzone Css -->
    <link href="{{ loadAsset('asset/plugins/dropzone/dropzone.css') }}" rel="stylesheet">

    <!-- Multi Select Css -->
    <link href="{{ loadAsset('asset/plugins/multi-select/css/multi-select.css') }}" rel="stylesheet">

    <!-- Bootstrap Spinner Css -->
    <link href="{{ loadAsset('asset/plugins/jquery-spinner/css/bootstrap-spinner.css') }}" rel="stylesheet">

    <!-- Bootstrap Tagsinput Css -->
    <link href="{{ loadAsset('asset/plugins/bootstrap-tagsinput/bootstrap-tagsinput.css') }}" rel="stylesheet">

    <!-- Bootstrap Select Css -->
    <link href="{{ loadAsset('asset/plugins/bootstrap-select/css/bootstrap-select.css') }}" rel="stylesheet" />



    <!-- Bootstrap Material Datetime Picker Css -->
    <link href="{{ loadAsset('asset/plugins/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css') }}"
        rel="stylesheet" />

    <!-- Bootstrap DatePicker Css -->
    <link href="{{ loadAsset('asset/plugins/bootstrap-datepicker/css/bootstrap-datepicker.css') }}" rel="stylesheet" />


    <!-- noUISlider Css -->
    <link href="{{ loadAsset('asset/plugins/nouislider/nouislider.min.css') }}" rel="stylesheet" />

    <!-- Sweet Alert Css -->
    <link href="{{ loadAsset('asset/plugins/sweetalert/sweetalert.css') }}" rel="stylesheet" />
@endpush

@push('include-js')
    <!-- Moment Plugin Js -->
    <script src="{{ loadAsset('asset/plugins/momentjs/moment.js') }}"></script>

    <!-- Bootstrap Material Datetime Picker Plugin Js -->
    <script src="{{ loadAsset('asset/plugins/bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker.js') }}">
    </script>

    <!-- Bootstrap Datepicker Plugin Js -->
    <script src="{{ loadAsset('asset/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js') }}"></script>


    <!-- Sweet Alert Plugin Js -->
    <script src="{{ loadAsset('asset/plugins/sweetalert/sweetalert.min.js') }}"></script>


    <!-- Autosize Plugin Js -->
    <script src="{{ loadAsset('asset/plugins/autosize/autosize.js') }}"></script>

    <script src="{{ loadAsset('asset/js/pages/forms/basic-form-elements.js') }}"></script>


    <script>
        @if (Session::has('success'))
            toastr["success"]('{{ Session::get('success') }}');
        @endif

        @if (Session::has('error'))
            toastr["error"]('{{ Session::get('error') }}');
        @endif



        @if ($errors->any())
            @foreach ($errors->all() as $error)
                toastr["error"]('{{ $error }}');
            @endforeach
        @endif
    </script>
    <script>
        $(document).ready(function () {

            toggleLateHalfdayDiv();

            $("input[name='clock_in'], input[name='clock_out']").on("change", function () {
                var clockInValue = $("input[name='clock_in']").val();
                var clockOutValue = $("input[name='clock_out']").val();

                if (clockInValue && clockOutValue) {
                    var startTime = parseTime(clockInValue);
                    var endTime = parseTime(clockOutValue);

                    if (startTime && endTime) {
                        var diff = endTime - startTime;
                        var hours = Math.floor(diff / 3600000); 
                        var minutes = Math.floor((diff % 3600000) / 60000); 

                        $("input[name='working_hours']").val(hours + minutes / 60);
                    } else {
                        $("input[name='working_hours']").val("");
                    }
                } else {
                    $("input[name='working_hours']").val("");
                }
            });

            function parseTime(timeStr) {
                try {
                    var parts = timeStr.split(":");
                    if (parts.length === 2) {
                        var hours = parseInt(parts[0], 10);
                        var minutes = parseInt(parts[1], 10);
                        if (!isNaN(hours) && !isNaN(minutes)) {
                            return new Date(2023, 0, 1, hours, minutes); 
                        }
                    }
                } catch (e) {
                    console.error("Error parsing time: " + e);
                }
                return null;
            }
                
        });

        $('input[name=enable_late_halfday]').change(function () {
            toggleLateHalfdayDiv();
        });

        function toggleLateHalfdayDiv() {
            var enable_late_halfday = $('input[name=enable_late_halfday]:checked').val();
            if (enable_late_halfday == '1') {
                $('#late_halfday_div').show();
            } else {
                $('#late_halfday_div').hide();
            }
        }
    </script>
@endpush