@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="/member/{!! $alias !!}/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">Manager</label>
                    <div id="manager_name"></div>
                    <br />
                </div>

            </div>
        </div>

        <div>
            <div class="row">
                <div class="col-lg-6">
                    <div class="card">
                        <div class="card-body">
                            <div class="mb-1 form-group {{{ $errors->has('user_id') ? 'has-error' : '' }}}">
                                <!-- <label class="form-label" for="select2-basic">Basic</label> -->
                                <h5>ChooseMember</h5>
                                <select class="select2 form-select" name="user_id" id="user_id" onchange="getMangerName(); getLeaveType();">
                                    <option value=" ">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>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">12</h2>
                                <p class="card-text">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">3</h2>
                                <p class="card-text">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">2</h2>
                                <p class="card-text">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">13</h2>
                                <p class="card-text">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="handleHalfDay()">
                                    <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">First Half Day</label>
                                </div>
                                <div class="form-check form-check-inline" onclick="handleHalfDay()">
                                    <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">Second Half Day</label>
                                </div>
                                <div class="half_day hide">

                                </div>
                            </div>
                            {!! $errors->first('duration', '<label class="control-label error" for="duration">:message</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>Date <span style="color: red">*</span></h5>
                            <!-- <label class="form-label" for="fp-default">Default</label> -->
                            <input type="date" 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 id="multi-date" class="row" style="display: none">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-body">
                            <h5>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>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>
             
            <input type="hidden" name="attachments" />
            <div class="row">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title">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>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',['alias'=>$alias]) !!}";
        $('#modelHeading').html('Manage Leave Type');
        $.ajaxModal('#projectCategoryModal', url);
    })

    $('#save-form-2').click(function() {
        $.easyAjax({
            url: "{!! route('member.leaves.store',['alias'=>$alias]) !!}",
            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: "/members/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/memberajaxleavetype?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: '/member/{!! $alias !!}/leave/balance',
            type: 'POST',
            data: data,
            success: function(data) {
                console.log(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