@extends('app-new')

@push('head-script')

@endpush

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">Leave create</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/">Home</a>
                    </li>
                    <li class="breadcrumb-item"><a href="/leaves">Leaves</a>
                    </li>
                    <li class="breadcrumb-item active">Leave Creation
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')
<section id="dashboard-ecommerce">
    {!! Form::model($leave, ['id'=>'createLeave','class'=>'','method' => isset($leave) && $leave->id ? 'put' : 'post','files' => 'true']) !!}
        <div class="form-body">

            <input type="hidden" value="{{$_leaveTypes}}" id="leaveTypes" />

            <div class="row hide manager_name">
                <div class="col-md-4">
                    <label for="manager_name">{{trans('leave/leave.manager')}}</label>
                    <div id="manager_name"></div>
                    <br />
                </div>

            </div>
        </div>

        <div>
            <div class="row">
                @if (isset($status))
                    <div class="card-header">
                        @foreach ($status['messages'] as $m)
                            <div class="demo-spacing-0">
                                <div class="alert alert-{{ $status['code'] }}" role="alert">
                                    <div class="alert-body"><strong>{{ $m }}</strong></div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif
                
                <div class="col-lg-6">
                    <div class="card">
                        <div class="card-body">
                            <div class="mb-1">
                                <!-- <label class="form-label" for="select2-basic">Basic</label> -->
                                <h5>@lang('modules.messages.chooseMember')
                                    <span style="color: red">*</span>
                                </h5>
                                <select class="select2 form-select" data-placeholder="@lang('modules.messages.chooseMember')" name="user_id" id="user_id" onchange="getMangerName(); getLeaveType();">
                                    <option value="">{{trans('leave/leave.none')}}</option>
                                    @foreach($employees as $employee)
                                    <option value="{{ $employee->id }}">{{ ucwords($employee->name) }} ({{$employee->employee_code}})</option>
                                    @endforeach
                                </select>
                                {!! $errors->first('user_id', '<label class="control-label error" for="user_id">This field is required.</label>')!!}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="card">
                        <div class="card-body">
                            <div class="mb-1">
                                <!-- <label class="form-label" for="basicSelect">Leave Type</label> -->
                                <h5>{{trans('leave/leave.leave_type')}}
                                    <span style="color: red">*</span>
                                </h5>
                                <select class="select2 form-control" name="leave_type_id" id="leave_type_id" onchange="getBalance();">
                                </select>
                                 {!! $errors->first('leave_type_id', '<label class="control-label error" for="leave_type_id">:message</label>')!!}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-3 col-sm-6 col-12">
                    <div class="card">
                        <div class="card-header">
                            <div>
                                <h2 class="fw-bolder mb-0" id="t_leaves">0</h2>
                                <p class="card-text">{{trans('leave/leave.total_leaves')}}</p>
                            </div>
                            <div class="avatar bg-light-primary p-50 m-0">
                                <div class="avatar-content">

                                    <i data-feather='layers' class="font-medium-5"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6 col-12">
                    <div class="card">
                        <div class="card-header">
                            <div>
                                <h2 class="fw-bolder mb-0" id="t_approved">0</h2>
                                <p class="card-text">{{trans('leave/leave.total_approved')}}</p>
                            </div>
                            <div class="avatar bg-light-success p-50 m-0">
                                <div class="avatar-content">

                                    <i data-feather='check-circle' class="font-medium-5"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6 col-12">
                    <div class="card">
                        <div class="card-header">
                            <div>
                                <h2 class="fw-bolder mb-0" id="t_pending">0</h2>
                                <p class="card-text">{{trans('leave/leave.pending')}}</p>
                            </div>
                            <div class="avatar bg-light-danger p-50 m-0">
                                <div class="avatar-content">
                                    <i data-feather="alert-octagon" class="font-medium-5"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6 col-12">
                    <div class="card">
                        <div class="card-header">
                            <div>
                                <h2 class="fw-bolder mb-0" id="t_balanced">0</h2>
                                <p class="card-text">{{trans('leave/leave.balanced')}}</p>
                            </div>
                            <div class="avatar bg-light-warning p-50 m-0">
                                <div class="avatar-content">

                                    <i data-feather="server" class="font-medium-5"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-8 col-md-6 col-sm-12">
                    <div class="card">
                        <div class="card-body">
                            <h5>@lang('modules.leaves.selectDuration')</h5>
                            <div class="demo-inline-spacing">
                                <div class="form-check form-check-inline" onclick="elsehandleHalfDay()">
                                    <input class="form-check-input" type="radio" name="duration" id="duration_single" checked value="single"/>
                                    <label class="form-check-label" for="duration_single">@lang('modules.leaves.single')</label>
                                </div>
                                <div class="form-check form-check-inline" onclick="elsehandleHalfDay()">
                                    <input class="form-check-input" type="radio" name="duration" id="duration_multiple" value="multiple"/>
                                    <label class="form-check-label" for="duration_multiple">@lang('modules.leaves.multiple')</label>
                                </div>
                                <div class="form-check form-check-inline" onclick="elsehandleHalfDay()">
                                    <input class="form-check-input" type="radio" name="duration" id="first_half_day" value="first half day"/>
                                    <label class="form-check-label" for="first_half_day">{{trans('leave/leave.first_half_day')}}</label>
                                </div>
                                <div class="form-check form-check-inline" onclick="elsehandleHalfDay()">
                                    <input class="form-check-input" type="radio" name="duration" id="second_half_day" value="second half day"/>
                                    <label class="form-check-label" for="second_half_day">{{trans('leave/leave.second_half_day')}}</label>
                                </div>
                                <div class="half_day hide">

                                </div>
                            </div>
                            {!! $errors->first('duration', '<label class="control-label error" for="duration">This field is required.</label>')!!}
                        </div>
                    </div>

                </div>
                <div class="col-lg-4 col-md-6 col-sm-12">
                    <div class="card">
                        <div class="card-body" id="single-date">
                            <h5>{{trans('common/common.date')}} <span style="color: red">*</span></h5>
                            <!-- <label class="form-label" for="fp-default">Default</label> -->
                            <input type="text" class="form-control flatpickr-basic"
                                placeholder="YYYY-MM-DD"  name="leave_date" autocomplete="off">
                                {!! $errors->first('leave_date', '<label class="control-label error" for="leave_date">:message</label>')!!}
                        </div>
                    </div>
                </div>
            </div>
            <!-- <div class="row"> -->
                <div id="multi-date" class="row" style="display: none">
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <h5>{{trans('common/common.from_date')}}<span style="color: red">*</span></h5>
                                <!-- <label class="form-label" for="fp-default">Default</label> -->
                                <input type="text" class="form-control flatpickr-basic"
                                    placeholder="YYYY-MM-DD"  name="leave_from_date"  autocomplete="off">
                                    {!! $errors->first('leave_from_date', '<label class="control-label error" for="leave_from_date">:message</label>')!!}
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <h5>{{trans('common/common.to_date')}}<span style="color: red">*</span></h5>
                                <!-- <label class="form-label" for="fp-default">Default</label> -->
                                <input type="text" class="form-control flatpickr-basic"
                                    placeholder="YYYY-MM-DD"  name="leave_to_date"  autocomplete="off"> 
                                    {!! $errors->first('leave_to_date', '<label class="control-label error" for="leave_to_date">:message</label>')!!}
                            </div>
                        </div>
                    </div>
                </div>
            <!-- </div> -->
            <input type="hidden" name="attachments" />
            <div class="row">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title">{{trans('leave/leave.leave_attachment_doc')}}</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-lg-6 col-md-12">
                                    <!-- <label for="formFileMultiple" class="form-label">Multiple files input</label> -->
                                    <input class="form-control" name="files" id="attachments" type="file" multiple="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title">@lang('modules.leaves.reason') <span style="color:red">*</span></h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-12">
                                    <div class="mb-1">
                                        <textarea class="form-control" name="reason" id="reason" rows="3" placeholder="reason"></textarea>
                                        {!! $errors->first('reason', '<label class="control-label error" for="reason">:message</label>')!!}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6" style="display: none">
                    <label>{{trans('leave/leave.remark')}}</label>
                    <div class="form-group">
                        <textarea name="remark" id="remark" class="form-control" cols="30" rows="5"></textarea> 
                        {!! $errors->first('remark', '<label class="control-label error" for="remark">:message</label>')!!}
                    </div>
                </div>

            </div>

        </div>
        

        <div class="d-flex justify-content-center mb-2">
            <button type="submit" id="save-form" class="btn btn btn-gradient-success"><i data-feather='check'></i> @lang('app.save')</button>
        </div>
    {!! Form::close() !!}

</section>
@endsection
@push('footer-script')
<!-- BEGIN: Vendor JS-->
<!-- <script src="../../../app-assets/vendors/js/vendors.min.js"></script> -->
<!-- BEGIN Vendor JS-->

<!-- BEGIN: Page Vendor JS-->
<!-- <script src="../../../app-assets/vendors/js/forms/select/select2.full.min.js"></script> -->
<!-- END: Page Vendor JS-->

<!-- BEGIN: Theme JS-->
<!-- <script src="../../../app-assets/js/core/app-menu.js"></script> -->
<!-- <script src="../../../app-assets/js/core/app.js"></script> -->
<!-- END: Theme JS-->

<!-- BEGIN: Page JS-->
<script src="/app-assets/js/scripts/forms/form-select2.js"></script>
<script src="/assets/js/daterangepicker.js"></script>
<script src="/assets/plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script src="/assets/plugins/bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>

<!-- END: Page JS-->

<script>
$(window).on('load', function() {
    if (feather) {
        feather.replace({
            width: 14,
            height: 14
        });
    }
    // barChartExample();
})
</script>

<!-- END: Page JS-->

<style type="text/css">
    .alert.alert-error.alert-dismissible.fade.in {
    background-color: #f13e3e;
    color: white;
}
label.control-label.error {
    color: red;
}
span.select2.select2-container.select2-container--default {
    width: 100% !important; 
}
label.control-label {
    color: red;
}

</style>
<script>
    var date = new Date();
    var startDate = new Date(date.getFullYear(), date.getMonth(), 1);
    var endDate = new Date(date.getFullYear(), date.getMonth() + 1, 0);
    $(".select2").select2({
        formatNoMatches: function() {
            return "{{ __('messages.noRecordFound') }}";
        }
    });

    jQuery('#multi_date').datepicker({
         multidate: true,
         autoclose: true,
         startDate: startDate,
         format: 'yyyy-mm-dd',
    });

    jQuery('#single_date').datepicker({
    autoclose: true,
    startDate: startDate,
    format: 'yyyy-mm-dd',
    });

    jQuery('#leave_from_date').datepicker({
    autoclose: true,
    startDate: startDate,
    format: 'yyyy-mm-dd',
    });

    
    $("#leave_to_date").datepicker({ 
        autoclose: true,
        format: 'yyyy-mm-dd',
        onSelect: function(selected) {
           $("#leave_from_date").datepicker("option","maxDate", selected)
        }
    });

    $("input[name=duration]").click(function() {
        if ($(this).val() == 'multiple') {
            $('#multi-date').show();
            $('#single-date').hide();
        } else {
            $('#multi-date').hide();
            $('#single-date').show();
        }
    })

    $('#createLeave').on('click', '#addLeaveType', function() {
        var url = "{{ route('leaveType.create')}}";
        $('#modelHeading').html('Manage Leave Type');
        $.ajaxModal('#projectCategoryModal', url);
    })

    $('#save-form-2').click(function() {
        $.easyAjax({
            url: "{{route('leaves.store')}}",
            container: '#createLeave',
            type: "POST",
            redirect: true,
            data: $('#createLeave').serialize()
        })
    });

   

    function handleHalfDay() {
        $(".half_day").removeClass('hide');
    }

    function elsehandleHalfDay() {
        $(".half_day").addClass('hide');
    }

    function getMangerName() {
        $(".manager_name").addClass('hide');
        $.ajax({
            url: "/admin/manager?id=" + $("#user_id").val(),
            type: "GET",
            data: {
                _token: '{{ csrf_token() }}',
            },
            dataType: 'json',
            success: function(dataResult) {
                $(".manager_name").removeClass('hide');
                $("#manager_name").html(dataResult.hod.name);

            }
        });
    }

    function getLeaveType() {
        $.ajax({
            url: "/admin/ajaxleavetype?id=" + $("#user_id").val(),
            type: "GET",
            data: {
                _token: '{{ csrf_token() }}',
            },
            dataType: 'json',
            success: function(result) {
                $('#leave_type_id').html('<option value="">Select Type</option>'); 
    $.each(result.leavetype,function(key,value){
    $("#leave_type_id").append('<option value="'+value.id+'">'+value.type_name+'</option>');
    });

            }
        });
    }


    function getBalance() {
        var data = {
            leave_type_id: $("#leave_type_id").val(),
            leave_type_name: $("#leave_type_id option:selected").text(),
            id: $("#user_id").val(),
            '_token': '{{{csrf_token()}}}'
        }
        $.ajax({
            url: '/leave/balance',
            type: 'POST',
            data: data,
            success: function(data) {
                $("#t_leaves").html(data.t_leaves);
                $("#t_approved").html(data.t_approved);
                $("#t_pending").html(data.t_pending);
                $("#t_balanced").html(data.t_balanced);
                if(data.is_attachment=='1'){
                    $('.ml').removeClass('hide');
                }else{
                    $('.ml').addClass('hide');
                }


            }
        });
    }
</script>
@endpush