@extends('app-new')

@push('head-script')
    <!-- BEGIN: Vendor CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/forms/wizard/bs-stepper.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/flatpickr/flatpickr.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/pickadate/pickadate.css">
    <!-- END: Vendor CSS-->

    <!-- BEGIN: Page CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-validation.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/core/menu/menu-types/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-wizard.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-pickadate.css">

    <!-- END: Page CSS-->
@endpush

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">Leaves</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ $orgUrl . '/home' }}">Home</a>
                    </li>
                    <li class="breadcrumb-item"><a href="{{ $orgUrl . '/leave-approvals' }}">Leave</a>
                    </li>
                    <li class="breadcrumb-item active">
                        Add Leave
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')
    <!-- Basic multiple Column Form section start -->
    {{-- @php

dd($orgUrl);
@endphp --}}

    <section id="multiple-column-form">
        <div class="row">
            <div class="col-md-8">
                <div class="card new-cardbox">
                    <div class="card-header newheader border-bottom mb-1">
                        <h4 class="card-title">Apply Leave</h4>
                    </div>
                    <div class="card-body">
                        <form class="form" role="post-data" enctype='multipart/form-data' method="POST" id="leaveForm"
                            action="{{ $orgUrl . '/leaves/store' }}" redirect="{{ $orgUrl . '/home' }}">
                            <input type="hidden" name="organization_id" value="{{ $organization->id }}">
                            <input type="hidden" name="app_type" value="web">

                            <div class="row">
                                <div class="col-md-12">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-1">
                                                <label class="form-label">Leave Apply For <span
                                                        class="text-danger">*</span></label>
                                                <select class="form-select" name="employee_id" id="employee_id">
                                                    <option value=" ">Please Select</option>
                                                    <option value="{{  Auth::guard('web2')->user()->id }}">
                                                        Self
                                                    </option>
                                                    @foreach ($teamMembers as $teamMember)
                                                        <option value="{{ $teamMember->id }}">
                                                            {{ ucfirst($teamMember->name) }} ({{ ucfirst($teamMember->employee_code) }})
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-1">
                                                <label class="form-label">Leave Type <span
                                                        class="text-danger">*</span></label>
                                                <select class="form-select" name="leave_type_id" id="leave_type_id">
                                                    <option value=" ">Please Select</option>
                                                    
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-6 col-12">
                                            <div class="mb-1">
                                                <label class="form-label">Leave Duration <span
                                                        class="text-danger">*</span></label>
                                                <select class="form-select" name="leave_duration" id="leave_duration">
                                                    @foreach ($leaveDurations as $leaveDuration)
                                                        <option value="{{ $leaveDuration }}"
                                                            data-duration="{{ $leaveDuration }}">
                                                            {{ ucfirst($leaveDuration) }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-6 col-12">
                                            <div class="mb-1">
                                                <label class="form-label">No. of leaves <span
                                                        class="text-danger">*</span></label>
                                                <input type="number" readonly class="form-control"
                                                    placeholder="Total No. of Leaves" value="1" name="no_of_leaves" id="no_of_leaves">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-6 col-12">
                                            <div class="mb-1">
                                                <label class="form-label">From Date <span
                                                        class="text-danger">*</span></label>
                                                <input type="text" name="from_date" id="from_date"
                                                    class="form-control flatpickr-basic" placeholder="YYYY-MM-DD">
                                            </div>
                                        </div>
                                        <div class="col-md-6 col-12 ishort-leave" id="todate">
                                            <div class="mb-1">
                                                <label class="form-label">To Date <span class="text-danger">*</span>
                                                </label>
                                                <input type="text" name="to_date" id="to_date"
                                                    class="form-control flatpickr-basic" placeholder="YYYY-MM-DD">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12 col-12" id="short-attendance-lists">
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-6 mb-1 short-date-time">
                                            <label class="form-label">From Time <span class="text-danger">*</span></label>
                                            <input type="time" name="from_time" id="from_time" class="form-control">
                                        </div>
                                        <div class="col-md-6 mb-1 short-date-time">
                                            <label class="form-label">To Time <span class="text-danger">*</span></label>
                                            <input type="time" name="to_time" id="to_time" class="form-control">
                                        </div>
                                        <div class="col-md-12 mb-1 short-date-time">
                                            <label class="form-label">Note:-<span class="text-danger"> Short Time must be between Shift Timings </span></label>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-8 col-12">
                                            <div class="mb-1">
                                                <label class="form-label">Reason for Leave <span
                                                        class="text-danger">*</span></label>
                                                <textarea class="form-control" placeholder="Enter reason here..." name="reason"></textarea>
                                            </div>
                                        </div>
                                        <div class="col-md-4 col-12">
                                            <div class="mb-1">
                                                <div class="custom-file">
                                                    <label for="formFile" class="form-label">Upload Document <span
                                                        class="text-danger">(Max 7 MB) </span></label>
                                                    <input class="form-control" type="file" id="formFile" name="document" title="Accept image,pdf,doc">
                                                    <span style="font-weight: bold; margin-top: 5px; font-size: 12px">eg: image,pdf,doc</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-12">
                                            <button type="button"
                                                class="btn btn-primary me-1 waves-effect waves-float waves-light" id="finalSubmit">Submit</button>
                                            <button type="reset" onclick="this.form.reset()"
                                                class="btn btn-outline-secondary waves-effect">Reset</button>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <input type="hidden" name="is_short_leave" id="is-short-leave" value="0">

                        </form>
                    </div>
                </div>
            </div>

           <div id="emp_leave_details" class="col-md-4 mb-2" >

           

           </div>

        </div>
    </section>

    </form>
    <!-- Basic Floating Label Form section end -->

@endsection

@section('scripts')

    @push('footer-script')
        <!-- BEGIN: Page Vendor JS-->
        <script src="/app-assets/vendors/js/forms/wizard/bs-stepper.min.js"></script>
        <script src="/app-assets/vendors/js/forms/select/select2.full.min.js"></script>
        <script src="/app-assets/vendors/js/forms/validation/jquery.validate.min.js"></script>
        <script src="/app-assets/vendors/js/pickers/flatpickr/flatpickr.min.js"></script>
        <script src="/app-assets/vendors/js/pickers/pickadate/picker.js"></script>
        <script src="/app-assets/vendors/js/pickers/pickadate/picker.date.js"></script>
        <script src="/app-assets/vendors/js/pickers/pickadate/picker.time.js"></script>
        <script src="/app-assets/vendors/js/pickers/pickadate/legacy.js"></script>
        <!-- END: Page Vendor JS-->

        <!-- BEGIN: Page JS-->
        <script src="/app-assets/js/scripts/forms/form-wizard.js"></script>
        <script src="/app-assets/js/scripts/forms/form-validation.js"></script>
        <script src="/app-assets/js/scripts/forms/pickers/form-pickers.js"></script>
        <!-- END: Page JS-->

        <script src="{{ asset('js/common-script.js') }}"></script>
        <script src="{{ asset('js/sweetalert.js') }}"></script>

        <script>

            $(function () {
                $('.short-date-time').hide();
            })

            $("#leave_duration").change(function() {
                var durationName = $(this).find(":selected").data("duration");
                setNoOfLeaves();
                if (durationName !== 'Multiple') {
                    $("#to_date").attr('disabled', true);
                    $("#todate").addClass('hidden');
                } else {
                    $("#to_date").attr('disabled', false);
                    $("#todate").removeClass('hidden');

                }
            });

            $("#to_date").change(function() {
                var start = new Date($("#from_date").val());
                var end = new Date($("#to_date").val());

                $("#to_date").attr('max', start)

                if (end < start) {
                    $("#to_date").val('');
                    Swal.fire("Warning!", "To Date must be less than From Date.", "danger");
                }
                
                setNoOfLeaves();
            })

            jQuery(".flatpickr-basic").flatpickr({
                dateFormat: "Y-m-d",
                defaultDate: "today",
            });

            $("#employee_id").change(function() {
                var employeeId = $(this).val();
                $('#leave_type_id').html('');
                $.ajax({
                    headers: {
                        'X-CSRF-Token': $('meta[name=_token]').attr('content')
                    },
                    url: "{{ route('employee-leave-types', ['alias' => $alias]) }}",
                    type: 'POST',
                    cache: false,
                    data: {
                        'employee_id': employeeId,
                    },
                    datatype: 'html',
                    success: function(data) {
                        $('#leave_type_id').append('<option value=" ">Please Select</option>');
                        if(data){
                            $.each(data, function(key,val) {
                            var option ='<option value="'+val.leave_type.id+'" data-isshort="'+val.leave_type.is_short_leave+'">'+val.leave_type.name+'</option>';
                            $('#leave_type_id').append(option);
                            });
                        }
                       
                    }
            });
        });

        $("#employee_id").change(function() {
                var employeeId = $(this).val();
                $('#emp_leave_details').html('');
                $_token = "{{ csrf_token() }}";
                $('.preloader').show();
                $.ajax({
                    headers: {
                        'X-CSRF-Token': $('meta[name=_token]').attr('content')
                    },
                    url: "{{ route('employee-member-leave-details') }}",
                    type: 'POST',
                    cache: false,
                    data: {
                        '_token': $_token,
                        'employee_id': employeeId,
                    },
                    datatype: 'html',
                    success: function(data) {
                        $('#loader-status').html('');
                        $('#emp_leave_details').html(data.data);
                    },
                    complete: function(){
                            $('.preloader').hide();
                    }
            });
        });

        $("#leave_type_id").change(function() {
            
            var isshort = $(this).find(':selected').data('isshort');
            $('.ishort-leave').show();
            $('#leave_duration').removeAttr('disabled').change();
            $('#short-attendance-lists').html('');
            $('.short-date-time').hide();
            $("#is-short-leave").val(0);

            if(isshort){
                $("#no_of_leaves").val(1);
                $("#is-short-leave").val(1);
                $('.ishort-leave').hide();

                $('#leave_duration').val('Single').attr('disabled', true).change();
                $('.short-date-time').show();
                $('#from_date').trigger('change');
            }
        });

        $('#finalSubmit').click(function(){
            $('.help-block').remove();
            $('#leave_duration, #from_date, #from_time, #to_time').removeAttr('disabled');

            var url = $('#leaveForm').attr('action');
            var redirectUrl = $('#leaveForm').attr('redirect');
            var method = $('#leaveForm').attr('method');
            var data = new FormData($('#leaveForm')[0]);

            leaveSubmit(url, redirectUrl, method, data);
        });

        $('#from_date').change(function(){
            setNoOfLeaves();
            $('#short-attendance-lists').html('');
            if($("#is-short-leave").val() == '1'){
                $.ajax({
                    url: '/member/{{$alias}}/ajax/get-attendance-summary',
                    type: 'GET',
                    data: {
                        employee_id: $("#employee_id").val(),
                        attendance_date: $(this).val()
                    },
                    success:function(response){
                        var html = '';
                        if(response.data){
                            var html = `<div>
                                            <label class="form-label">Attendance</label>
                                        </div>
                                        <table class="table table-striped form-group" style="margin-bottom: 20px;">
                                            <thead>
                                                <th class="px-1">Date</th>
                                                <th class="px-1">In Time</th>
                                                <th class="px-1">End Time</th>
                                                <th class="px-1">Working Hours</th>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>${response.data.attendance_date}</td>
                                                    <td>${response.data.in_time}</td>
                                                    <td>${response.data.out_time}</td>
                                                    <td>${response.data.working_time}</td>
                                                </tr>
                                            </tbody>
                                        </table>`;
                        }
                        $('#short-attendance-lists').html(html);
                    }
                });
            }
        });

        function leaveSubmit(url, redirectUrl, method, data){
            $.ajax({
                url: url,
                type: method,
                data: data,
                contentType: false,
                processData: false,
                success:function(res){
                    if(res?.warning){
                        Swal.fire({
                            title: 'Are you sure?',
                            text: res?.message,
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonColor: '#3085d6',
                            cancelButtonColor: '#d33',
                            confirmButtonText: 'Yes, Go Ahead!'
                        })
                        .then((result) => {
                            if (result?.value) {
                                data.append('is_warning_passed', 1);
                                leaveSubmit(url, redirectUrl, method, data);
                            }
                        });
                    }else{
                        Swal.fire("Success!", res.message, "success");
                        setTimeout(function() {
                            location.href = redirectUrl;
                        }, 2200);
                    }
                },
                error: function($response) {
                    if ($response.status === 422) {
                        if (
                            Object.size($response.responseJSON) > 0 &&
                            Object.size($response.responseJSON.errors) > 0
                        ) {
                            show_validation_error($response.responseJSON.errors);
                        }
                    } else {
                        Swal.fire(
                            "Info!",
                            $response.responseJSON.message,
                            "warning"
                        );
                        setTimeout(function() {}, 1200);
                    }
                },
            });
        }

            function setNoOfLeaves() {
                $('.help-block').remove();
                let data = {
                    leave_duration: $('#leave_duration').val(),
                    employee_id: $('#employee_id').val(),
                    from_date: $('#from_date').val(),
                    to_date: $('#to_date').val(),
                    leave_type_id: $('#leave_type_id').val(),
                }

                $.ajax({
                    url: "/member/{{ $alias }}/leaves/get-no-of-leaves",
                    type: "get",
                    data: data,
                    success: function(res) {
                        if(res?.error){
                            $('#no_of_leaves').after(`<span class="help-block text-danger">${res?.message}</span>`)
                        }else{
                            let prevLeaveDuration = $('#leave_duration').val();
                            html = '';
                            res.durations.forEach(item=>{
                                html += `<option value="${item}" ${item == prevLeaveDuration ? 'selected' : ''} data-duration="${item}">${item}</option>`;
                            })
                            $('#leave_duration').html(html);
                            $('#no_of_leaves').val(res.no_of_leaves);


                            $('#short-attendance-lists').html('');

                            if(res.is_comp_off == '1' && res.comp_off_selection == 'manual'){
                                if (res.comp_off_list.length) {
                                    var html = `<div>
                                                    <label class="form-label">Select Comp Offs</label>
                                                </div>
                                                <table class="table table-striped form-group" style="margin-bottom: 20px;">
                                                    <thead>
                                                        <th class="px-1">#</th>
                                                        <th class="px-1">Date</th>
                                                        <th class="px-1">Day Count</th>
                                                        <th class="px-1">Bal. Day Count</th>
                                                        <th class="px-1">Availed Status</th>
                                                        <th class="px-1">Expiry_date</th>
                                                    </thead>
                                                    <tbody>`;
                                    res.comp_off_list.forEach(item => {
                                        html += `<tr>
                                                            <td><input type="checkbox" name=comp_off_ids[] value="${item.id}"></td>
                                                            <td>${item.request_date}</td>
                                                            <td>${item.day_count}</td>
                                                            <td>${item.bal_day_count}</td>
                                                            <td>${item.availed_status}</td>
                                                            <td>${item.expiry_date ?? '-'}</td>
                                                        </tr>`;
                                    })
                                    html += `</tbody> 
                                            </table>`;
    
                                    $('#short-attendance-lists').html(html);
                                }
                                else{
                                    var html = `<div>
                                                    <label class="form-label">Select Comp Offs</label>
                                                </div>
                                                <table class="table table-bordered form-group" style="margin-bottom: 20px;">
                                                    <tbody>
                                                        <tr>
                                                            <td style="width:100%; text-align:center;">No Comp off Found</td> 
                                                        </tr>
                                                    </tbody> 
                                            </table>`;
    
                                    $('#short-attendance-lists').html(html);
                                }
                            }
                        }
                    },
                    error: function($response) {
                        if ($response.status === 422) {
                            if (
                                Object.size($response.responseJSON) > 0 &&
                                Object.size($response.responseJSON.errors) > 0
                            ) {
                                show_validation_error($response.responseJSON.errors);
                            }
                        } else {
                            Swal.fire(
                                "Info!",
                                $response.responseJSON.message,
                                "warning"
                            );
                            setTimeout(function() {}, 1200);
                        }
                    }
                });
            }
        </script>
    @endpush