@extends('layouts.app')

@section('page-title')
    <div class="bg-title d-flex flex-wrap align-items-center justify-content-between">
        <h4 class="page-title">
            <i class="{{ $pageIcon }}"></i> @lang($pageTitle)
        </h4>
    </div>
@endsection

@push('head-script')
    <link rel="stylesheet" href="{{ asset('plugins/bower_components/clockpicker/dist/jquery-clockpicker.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/bower_components/jquery-asColorPicker-master/css/asColorPicker.css') }}">
@endpush

@section('content')
    <div class="dash_panel">
        <div class="customCard">
            {{-- @include('sections.admin_setting_menu') --}}
            <h4>@lang($pageTitle)</h4>
            
            <div class="alert alert-info m-b-20">
                <i class="fa fa-info-circle"></i> @lang('messages.logTimeNote')
            </div>
            
            <form id="editSettings" class="ajax-form" method="POST">
                @csrf
                
                @php
                    $access = hasAccessOf('time_log_settings');
                @endphp

                @if($access['is_delete'])
                    <div class="form-group">
                        <div class="checkbox themeCheckbox">
                            <input id="auto_timer_stop" name="auto_timer_stop" value="yes"
                                @if ($logTime->auto_timer_stop == 'yes') checked @endif type="checkbox">
                            <label for="auto_timer_stop">@lang('modules.logTimeSetting.autoStopTimerAfterOfficeTime')</label>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <div class="checkbox themeCheckbox">
                            <input id="approval_required" name="approval_required" value="true"
                                @if ($logTime->approval_required) checked @endif type="checkbox">
                            <label for="approval_required">@lang('modules.logTimeSetting.approvalRequired')</label>
                        </div>
                    </div>
                @endif
            </form>
        </div>
    </div>
@endsection

@push('footer-script')
    <script>
        // change Log Time For Setting
        $('input[name=log_time_for]').click(function() {
            var timeFor = $('input[name=log_time_for]:checked').val();

            $.easyAjax({
                url: '{{ route('log-time-settings.store') }}',
                type: "POST",
                data: {
                    '_token': '{{ csrf_token() }}',
                    'log_time_for': timeFor
                }
            })
        });

        $('#auto_timer_stop').click(function() {
            var auto_timer_stop = 'no';
            if ($(this).prop("checked") == true) {
                auto_timer_stop = 'yes';
            }
            $.easyAjax({
                url: '{{ route('log-time-settings.store') }}',
                type: "POST",
                data: {
                    '_token': '{{ csrf_token() }}',
                    'auto_timer_stop': auto_timer_stop
                }
            })
        });

        $('#approval_required').click(function() {
            var approval_required = '0';
            if ($(this).prop("checked") == true) {
                approval_required = '1';
            }
            $.easyAjax({
                url: '{{ route('log-time-settings.store') }}',
                type: "POST",
                data: {
                    '_token': '{{ csrf_token() }}',
                    'approval_required': approval_required
                }
            })
        });
    </script>
@endpush