@extends('payroll.employee_frontend.layouts.employee')
@section('custom_style')
    <link href="{{ asset('/') }}assets/plugins/select2/css/select2.min.css" rel="stylesheet"/>
    <link href="{{ asset('/') }}assets/plugins/select2/css/select2-bootstrap4.css" rel="stylesheet"/>
    <link href="{{ asset('/') }}assets/plugins/datetimepicker/css/classic.css" rel="stylesheet"/>
    <link href="{{ asset('/') }}assets/plugins/datetimepicker/css/classic.time.css" rel="stylesheet"/>
    <link href="{{ asset('/') }}assets/plugins/datetimepicker/css/classic.date.css" rel="stylesheet"/>
    <link rel="stylesheet" href="{{ asset('/') }}treeview/tree_view.css"/>
@endsection
@section('content')
    <section>
        <div class="col-12 mt-4">
            <h2 class="page-title text-center">Create Leave Application</h2>
            <div class="mb-2 heading-border"></div>
        </div>
    </section>
    <section class="px-3  pt-3 pt-lg-5 row">
        <div class="col-12 mb-4">
            <div class="blu-card d-flex flex-wrap">
                <div class="col-12">
                    @if (session('success'))
                        <div class="alert alert-success" id="hide-alert">
                            {{ session('success') }}
                        </div>
                    @endif
                    @if ($errors->any())
                        <div class="alert alert-danger" id="hide-alert">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                </div>

                <form class="leave-form col-12 col-md-6 border-right" action="{{route('employee.leave.store')}}" 
                      method="post" enctype="multipart/form-data">
                    @csrf
                    <div class="d-flex flex-wrap">
                        <input type="hidden" name="" id="http_method" value="post"/>

                        <input type="hidden" value="{{$emp_id}}" id="allEmp">
                        <div class="form-group col-12 col-md-6">
                            <label for="exampleInputEmail1" class="labels">Leave type</label>
                            <select class="form-control" name="leave_type_id" id="leaveType" required>
                                <option value="">Select Leave Type</option>
                              
                                @foreach ($employee_leave_types as $employee_leave_type)
                                <option value="{{ $employee_leave_type['leave_type_id'] }}" {{ old('leave_type_id', $leave->leave_type_id ) ==  $employee_leave_type['leave_type_id']? 'selected' : '' }}>
                                    {{ $employee_leave_type['leave_name'] }}</option>
                                @endforeach

                            </select>
                        </div>
                        <div class="form-group col-12 col-md-6">
                            <label for="exampleInputEmail1">Duty carried by</label>
                            <select class="form-control js-example-basic-single" name="duty_carried_by" id="">
                                @foreach ($carried_by_list as $cb)
                                <option value="{{ $cb->id }}  "{{ old('duty_carried_by', $leave->duty_carried_by) == $cb->id ? 'selected' : '' }}>{{ $cb->emp_name }}
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group col-12 col-md-6">
                            <label for="exampleInputEmail1">From Date</label>
                            <input type="text" id="start" value="{{ old('start_date', $leave->start_date) }}" name="start_date" onchange="dateCalculate()"
                            class="form-control datepicker" required/>
                            
                            {{-- <input id="start" name="start_date" onchange="dateCalculate()" class="form-control datepicker" type="text" required> --}}
                        </div>
                        <div class="form-group col-12 col-md-6">
                            <label for="exampleInputEmail1">To Date</label>
                            <input type="text" id="end" value="{{ old('end_date', $leave->end_date) }}" name="end_date" onchange="dateCalculate()"
                            class="form-control datepicker" required/>
                            
                            {{-- <input id="end" name="end_date" onchange="dateCalculate()" class="form-control datepicker" type="text" required> --}}
                        </div>
                        <div class="form-group col-12 col-md-6">
                            <label for="exampleInputEmail1">Total Days</label>
                            <input type="number"  id="total_days" name="leave_count" value="{{ old('leave_count', $leave->leave_count) }}" class="form-control" readonly/>

                            {{-- <input id="total_days"  value="0" readonly class="form-control" name="leave_count"> --}}
                        </div>

                        <div class="form-group col-12 col-md-6">
                            <label for="exampleInputEmail1">Duration Type</label>
                            <select class="form-control" name="leave_duration_type" id="">
                                <option value="1" {{$leave->leave_duration_type ==1 ? 'selected': null}}>Full day</option>
                                <option value="2" {{$leave->leave_duration_type ==2 ? 'selected': null}}>Half day</option>
                            </select>
                        </div>
                        <div class="form-group col-12">
                            <label for="exampleInputEmail1">Leave Reason</label>

                            <textarea placeholder="enter your leave reason" class="form-control" name="leave_reason"
                                      id="" cols="30" rows="3" required>{{ $leave->leave_reason }}</textarea>
                        </div>
                        <div class="form-group col-12 row">
                            <div class="col-md-3">
                                <label  id="documents_lebel" documents_lebel="">Documents : </label>
                                <input type="hidden" id="document_lebel"  name="documents_lebel" value="">
                            </div>
                            <div class="col-md-6">
                             <input type="file" id="documents"  name="documents">
                            </div> 
                        </div>

                        <input type="hidden">
                        <div class="form-group col-12">
                            <input class="btn btn-success px-4" type="submit" value="Create" id="leave_submit_button">
                        </div>
                    </div>
                </form>

            </div>
        </div>
    </section>

@endsection

@section('script')
    <script src="{{asset('assets/plugins/select2/js/select2.min.js')}}"></script>
    <script src="{{ asset('/') }}assets/plugins/datetimepicker/js/legacy.js"></script>
    <script src="{{ asset('/') }}assets/plugins/datetimepicker/js/picker.js"></script>
    <script src="{{ asset('/') }}assets/plugins/datetimepicker/js/picker.time.js"></script>
    <script src="{{ asset('/') }}assets/plugins/datetimepicker/js/picker.date.js"></script>
    <script src="{{ asset('/') }}assets/plugins/bootstrap-material-datetimepicker/js/moment.min.js"></script>

    <script>
        $(document).on("focus",".datepicker",function(){
            $(this).pickadate({ // this is used in the system
                selectMonths: true,
                selectYears: 100,
                format: 'dd-mm-yyyy',
                firstDay: 0
            });
        });
    </script>

<script>
    $(document).ready(function () {
     
        let total_leave_days = $("#total_days").val();
        if (typeof total_leave_days == "undefined" || total_leave_days == "" || total_leave_days == 0) {
            $("#leave_submit_button").attr("disabled", true);
        }
       
    });

</script>
   
    <script>
      
        $('.js-example-basic-single').select2();
    </script>
     <script src="{{ asset('/') }}payroll_assets/leave/applist.js"></script>
@endsection