@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">
                                <option value="">Select Leave Type</option>
                                @foreach ($leave_info as $li)
                                    <option value="{{$li['id']}}">{{$li['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}}">{{$cb->emp_name}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group col-12 col-md-6">
                            <label for="exampleInputEmail1">From Date</label>
                            <input id="start" name="start_date" onchange="dateCalculate()" class="form-control datepicker" type="text">
                        </div>
                        <div class="form-group col-12 col-md-6">
                            <label for="exampleInputEmail1">To Date</label>
                            <input id="end" name="end_date" onchange="dateCalculate()" class="form-control datepicker" type="text">
                        </div>
                        <div class="form-group col-12 col-md-6">
                            <label for="exampleInputEmail1">Total Days</label>
                            <input id="total_days" type="number" 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">Full day</option>
                                <option value="2">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"></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 class="col-md-6 col-12 px-md-0">
                    <table class="table" id="resultApplist">
                        <thead>
                        <tr>
                            <th scope="col">Leave</th>
                            <th scope="col">Entitled</th>
                            <th scope="col">Availed</th>
                            <th scope="col">Dues</th>
                        </tr>
                        </thead>
                        <tbody id="leave_body">
                        @foreach ($leave_info as $li)
                            <tr>
                                <td>{{$li['leave_name']}}</td>
                                <td>{{$li['leave_count']}}</td>
                                <td>{{$li['leave_taken']}}</td>
                                <td>{{$li['leave_count'] - $li['leave_taken']}}</td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>

                    <h4 style="color:red" id="alert_message" class="text-center"></h4>
                </div>
            </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>
        // $("#end_date").on("change", function () {

        //     let start = new Date($("#start_date").val());
        //     if (typeof start == "undefined" || start == "") {
        //         start = 0;
        //     }
        //     let end = new Date($("#end_date").val());
        //     if (typeof end == "undefined" || end == "") {
        //         end = 0;
        //     }

        //     let timeDiff = Math.abs(end.getTime() - start.getTime());
        //     let diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));

        //      $("#total_days").val(diffDays + 1);
        // });

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