@extends('layouts.mainlayout')
@section('title', 'Apply Leave Employee')
    @section('main')
    <!-- Form validation -->
    <div class="card">
        <div class="card-header header-elements-inline">
            <h5 class="card-title icon-calculator font-weight-bold"> Apply Leave Employee</h5>
        </div>
        <div class="card-body">
            @if(isset($leave))
                <form class="form-validate-jquery" action="{{ route('admin-apply-leave.update',$leave->id) }}" method="POST">
                <input type="hidden" name="_method" value="PATCH"/>
            @else
                <form class="form-validate-jquery" action="{{ route('admin-apply-leave.store') }}" method="POST">
            @endif
            @csrf
            <fieldset class="mb-3">
                <legend class="text-uppercase font-size-sm font-weight-bold"> Apply Leave</legend>
                <!-- Basic text input -->
                <div class="form-group row" >
                    <label class="col-form-label col-lg-3">User <span class="text-danger">*</span></label>
                    <div class="col-lg-9">
                      <select  name ="user_id" id="user_id" class="form-control required col-md-9">
                        <option value="">Select User</option>
                        @foreach ($users as $user)
                        @if(auth()->user()->can('Can mark leave for all employees'))
                        <option  value="{{$user->id}}">{{ $user->name}} {{ $user->lastName }}</option>
                        @else if(auth()->user()->can('Can mark leave for reporting employees'))
                        @if(GetShiftDetailHelper::getPrimaryReportingManager($user->id) != 0 ? GetShiftDetailHelper::getPrimaryReportingManager($user->id) == auth()->user()->id : GetShiftDetailHelper::checkReportingManagers($user->id))
                        <option  value="{{$user->id}}">{{ $user->name}} {{ $user->lastName }}</option>
                        @endif
                        @endif
                        @endforeach
                      </select>
                    </div>
                  </div>
                  
                <div class="form-group row">
                    <label class="col-form-label col-lg-3">Type <span class="text-danger">*</span></label>
                    <div class="col-md-3">
                        <div class="form-group">
                            <select name="leave_id" id="leaveName" class="form-control required" disabled>
                                <option value="">Please Select Type</option>
                                @foreach ( $leaves as  $leave)
                                    <option  value="{{ $leave->id}}">{{  $leave->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <label class="col-form-label col-lg-2" id="leaveBalanceLabel">Leave Balance</label>
                    <div class="col-md-4" id="leaveBalanceDiv">
                        <div class="form-group">
                            <input type="text" name="leaveBalance" id="leaveBalance" class="form-control required" readonly="readonly" value=""/>
                        </div>
                    </div>
                </div>
                
                <!-- Day Part Selection -->
                <div class="form-group row" id="dayPartRow" style="display:none;">
                    <label class="col-form-label col-md-3">Leave Type  <span class="text-danger">*</span></label>
                    <div class="col-md-9">
                        <select name="dayPart" id="dayPart" class="form-control form-control-select2 required" disabled>
                            <option value="">Please Select Day Part</option>
                            <option value="full" id="fullDayOption">Full Day</option>
                            <option value="first_half" id="firstHalfOption">Half Day</option>
                        </select>
                        <span id="dayPartMessage" style="color: #f44336; display: none; margin-top: 5px;"></span>
                    </div>
                </div>
            
                
                <div class="form-group row fullday halfday1" style="display:none;">
                    <label class="col-form-label col-md-3">From <span class="text-danger">*</span></label>
                    <div class="col-md-9">
                        <input type="text" name="from_date"  placeholder="dd/mm/yyyy" data-date-format={{ config('settings.date_format') }} id="from_date"  readonly="readonly" class="form-control required" disabled  @if(isset($leave)) value="{{Carbon\Carbon::parse($leave->from_date)->format(config('settings.php_date_format'))}}" autofocus @endif/>
                    </div>
                </div>
                
                <div class="form-group row fullday" id="to__date" style="display:none;">
                    <label class="col-form-label col-md-3">To <span class="text-danger">*</span></label>
                    <div class="col-md-9">
                        <input type="text" name="to_date" placeholder="dd/mm/yyyy" data-date-format={{ config('settings.date_format') }} id="to_date" readonly="readonly" class="form-control required" disabled  @if(isset($leave)) value="{{Carbon\Carbon::parse($leave->to_date)->format(config('settings.php_date_format'))}}" autofocus @endif/>
                    </div>
                </div>
                
                <div class="form-group row fullday halfday" style="display:none;">
                    <label class="col-form-label col-lg-3">Leave Duration <span class="text-danger"></span></label>
                    <div class="col-lg-9">
                        <input type="text" name="leave_length" id="result" class="form-control" readonly="readonly" value=""/>
                        <span id="durationMessage" style="color: #f44336; display: none; margin-top: 5px;"></span>
                    </div>
                </div>
                
                <div class="form-group row halfdaytype" style="display:none;">
                    <label class="col-form-label col-md-3">Half Day Type</label>
                    <div class="col-md-9">
                        <select type="text" name="halfDayType" id="halfdaytype" class="form-control form-control-select2 required" disabled @if(isset($leave)) value="{{$leave->half_day_type}}" data-fouc @endif>
                            <option value="">Please select Half Day Type</option>
                            <option value="first_half">First Half</option>
                            <option value="second_half">Second Half</option>
                        </select>
                    </div>
                </div>

                <div class="form-group row fullday halfday1" style="display:none;">
                    <label class="col-form-label col-lg-3">Reason <span class="text-danger">*</span></label>
                    <div class="col-lg-9">
                        <textarea rows="3" cols="3" class="form-control @error('reason') is-invalid @enderror" name="reason"
                            id="reason" placeholder="Enter Description" disabled required
                            @if(isset($leave)){{$leave->reason}} @endif>
                        </textarea>
                        <span id="msg" style="color: #f44336;"></span>
                        @error('reason')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>
                </div>
                <!-- /basic text input -->
            </fieldset>
            <div class="d-flex justify-content-end align-items-center">
               <a class="btn bg-transparent text-primary border-primary ml-3" href="{{ route('admin-apply-leave.index') }}">Clear</a>
                <button type="submit" id="applyleave" class="btn btn-primary ml-3" disabled>Apply<i class="icon-paperplane ml-2"></i></button>
            </div>
            </form>
        </div>
    </div>
<!-- /form validation -->
@endsection

@section('js')
<script>
$(document).ready(function () {
    var leaveBalanceAmount = 0;
    var selectedLeaveId = '';
    var selectedUserId = '';

    function checkLeaveConflict(fromDate, toDate) {
        var baseurl = document.getElementById('baseurl').value;

        if (!fromDate || !selectedUserId) return;  // Check selectedUserId exists

        // if toDate not present → use fromDate
        if (!toDate) {
            toDate = fromDate;
        }

        $.ajax({
            type: 'GET',
            url: baseurl + '/admin-apply-leave/check-leave-exists',  // ADMIN URL
            data: {
                user_id: selectedUserId,   // USE SELECTED USER
                from_date: fromDate,
                to_date: toDate,
                halfdaytype: $('#halfdaytype').val()
            },
            success: function(response) {
                console.log(response);

                if (response.status == '100') {
                    new PNotify({
                        title: 'Conflict',
                        text: 'Leave already applied for selected date',
                        type: 'error',
                        delay: 2000
                    });

                    $("#applyleave").attr('disabled', true);
                    $("#reason").attr('disabled', true);
                } else {
                    // Only enable if other conditions are met
                    if ($('#reason').val().trim().length >= 10) {
                        $("#applyleave").removeAttr('disabled');
                    }
                    $("#reason").removeAttr('disabled');
                }
            },
            error: function(xhr, status, error) {
                console.error('Error checking leave conflict:', error);
            }
        });
    }
    
    // Step 1: When user is selected
    $('#user_id').on('change', function () {
        selectedUserId = $(this).val();
        
        resetAllFields();
        
        if (selectedUserId) {
            $("#leaveName").removeAttr('disabled');
        } else {
            $("#leaveName").attr('disabled', true);
        }
    });

    // Step 2: When leave type is selected , check the balance
    $('#leaveName').on('change', function () {
        selectedLeaveId = $(this).val();
        
        resetFieldsAfterLeaveType();
        
        if (!selectedLeaveId || !selectedUserId) {
            return;
        }
        fetchLeaveBalance();
    });

    // Step 3: When day part is selected
    $('#dayPart').on('change', function() {
        var dayPart = $(this).val();
        
        $("#from_date").val('');
        $("#to_date").val('');
        $("#reason").val('');
        $("#halfdaytype").val('');
        $("#leavetype").val('');
        $("#result").val('');
        $('.fullday, .halfday, .halfday1, .halfdaytype').hide();
        $('#leaveTypeRow').hide();
        $('#dayPartMessage').hide();
        $('#durationMessage').hide();
        $('#msg').text('');
        
        // Disable the reason and dates fields
        $("#from_date, #to_date, #reason, #halfdaytype").attr('disabled', true);
        $("#applyleave").attr('disabled', true);
        
        if (!dayPart) return;
        
        var requiredBalance = (dayPart === 'full') ? 1 : 0.5;
        
        // Check the balance
        if (leaveBalanceAmount < requiredBalance) {
            $('#dayPartMessage').text('Insufficient balance for ' + (dayPart === 'full' ? 'Full Day' : 'Half Day')).show();
            return;
        }
        
        // If balance is suffiecent, then show the fields
        if (dayPart === 'full') {
            $("#leavetype").val('full_day');
            $('#leaveTypeRow').show();
            $(".fullday").show();
            $(".halfday1").show();
            $("#to__date").show();
            $("#result").val('1');
            
            // Date pickers enable
            $("#from_date, #to_date").removeAttr('disabled');
        } else {
            $("#leavetype").val('half_day');
            $('#leaveTypeRow').show();
            $(".halfday").show();
            $(".halfday1").show();
            $(".halfdaytype").show();
            $("#result").val('0.5');
    
            $("#from_date, #halfdaytype, #reason").removeAttr('disabled');
        }
    });

    // Step 4: When date is selected
    $('#from_date').on('changeDate', function (selected) {
        var selectedDate = $(this).datepicker('getDate');
        var dayPart = $('#dayPart').val();
        $('#msg').text('');
        $('#durationMessage').hide();
        
        if (!selectedDate || !dayPart) return;
        
        if (dayPart === 'full') {
            var minDate = new Date(selected.date.valueOf());
            $('#to_date').datepicker('setStartDate', minDate);
            var to_date = $('#to_date').datepicker('getDate');
            
            if ($(this).datepicker('getDate') > to_date) {
                $('#to_date').datepicker('setDate', null);
                $("#reason").attr('disabled', true);
                $('#applyleave').attr('disabled', true);
            }
        } else {
            var halfDayType = $('#halfdaytype').val();
            if (!halfDayType) {
                $("#applyleave").attr('disabled', true);
                return;
            }
            
            validateShiftRules(selectedDate, halfDayType);
        }

        var fromDate = moment(selected.date).format('YYYY-MM-DD');
        var toDate = $('#to_date').datepicker('getDate') 
            ? moment($('#to_date').datepicker('getDate')).format('YYYY-MM-DD') 
            : null;

        checkLeaveConflict(fromDate, toDate);
    });

    // Step 5: 
    $('#to_date').on('changeDate', function() {
        var fromDate = $('#from_date').datepicker('getDate');
        var toDate = $(this).datepicker('getDate');
        $('#durationMessage').hide();
        
        if (fromDate && toDate) {
            // Working days calculate 
            calculateLeaveDuration();
            
            var calculatedDuration = parseFloat($('#result').val()) || 0;
            
            if (calculatedDuration > leaveBalanceAmount) {
                $('#durationMessage').text('Insufficient balance! Required: ' + calculatedDuration + ', Available: ' + leaveBalanceAmount.toFixed(2)).show();
                $("#reason").attr('disabled', true);
                $("#applyleave").attr('disabled', true);
            } else {
                $('#durationMessage').hide();
                $("#reason").removeAttr('disabled');
                
                if ($('#reason').val().trim().length >= 10) {
                    $("#applyleave").removeAttr('disabled');
                }
            }
        }

        var fromDate = moment($('#from_date').datepicker('getDate')).format('YYYY-MM-DD');
        var toDate = moment($(this).datepicker('getDate')).format('YYYY-MM-DD');

        checkLeaveConflict(fromDate, toDate);
    });

    // Step 6: When half day is selected
    $('#halfdaytype').on('change', function() {
        var halfDayType = $(this).val();
        var fromDate = $('#from_date').datepicker('getDate');
        $('#msg').text('');
        
        if (!halfDayType || !fromDate) {
            $("#applyleave").attr('disabled', true);
            return;
        }
        
        validateShiftRules(fromDate, halfDayType);
        var fromDate = moment($('#from_date').datepicker('getDate')).format('YYYY-MM-DD');

        checkLeaveConflict(fromDate, fromDate);
    });

    // Step 7: Reason box
    $("#reason").on('keyup change', function() {
        $('#reason').val($('#reason').val().trimLeft());
        var reason = $(this).val().trim();
        $('#msg').text('');
        
        if (reason.length === 0) {
            $('#msg').text('Reason is required');
            $("#applyleave").attr('disabled', true);
            return;
        }
        
        if (reason.length < 10) {
            $('#msg').text('Reason must be at least 10 characters');
            $("#applyleave").attr('disabled', true);
        } else {
            $('#msg').text('');

            var dayPart = $('#dayPart').val();
            var fromDate = $('#from_date').val();
            
            if (!dayPart || !fromDate) {
                $("#applyleave").attr('disabled', true);
                return;
            }
            
            if (dayPart === 'full') {
               
                var toDate = $('#to_date').datepicker('getDate') 
                                ? moment($('#to_date').datepicker('getDate')).format('YYYY-MM-DD') 
                                : null;
                var calculatedDuration = parseFloat($('#result').val()) || 0;
                
                if (fromDate && toDate && calculatedDuration <= leaveBalanceAmount) {
                    $("#applyleave").removeAttr('disabled');
                } else {
                    $("#applyleave").attr('disabled', true);
                }
            } else {
                var halfDayType = $('#halfdaytype').val();

                if (fromDate && halfDayType) {
                    $("#applyleave").removeAttr('disabled');
                } else {
                    $("#applyleave").attr('disabled', true);
                }
            }
        }
    });

    // Function: Leave balance fetch
    function fetchLeaveBalance() {
        $.ajaxSetup({
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
        });
        
        var baseurl = document.getElementById('baseurl').value;
        var formData = new FormData();
        formData.append('userId', selectedUserId);
        formData.append('leaveId', selectedLeaveId);
        
        $('#status').fadeIn(); 
        $('#preloader').fadeIn();
        
        $.ajax({
            type: 'POST',
            url: baseurl + '/admin-apply-leave/admin-get-leave-count',
            processData: false,
            contentType: false,
            data: formData,
            success: function (data) {
                var isBalanceSufficient = false;
                
                $(data).each(function (key, value) {
                    if (value.totalLeaves == 0 && value.leave_allocation_type != 'no_application') {
                        $('#leaveBalanceLabel').hide();
                        $('#leaveBalanceDiv').hide();
                        leaveBalanceAmount = 0;
                    } else {
                        leaveBalanceAmount = parseFloat(value.leaveBalance) || 0;
                        $("#leaveBalance").val(leaveBalanceAmount.toFixed(2));
                        $('#leaveBalanceLabel').show();
                        $('#leaveBalanceDiv').show();
                        
                        if (leaveBalanceAmount >= 0.5) {
                            isBalanceSufficient = true;
                        }
                    }
                });
                
                if (!isBalanceSufficient || leaveBalanceAmount < 0.5) {
                    new PNotify({
                        title: 'Not enough leave balance',
                        text: 'You do not have enough leave balance (Minimum 0.5 required)',
                        type: 'error',
                        delay: 2000,
                    });
                    $("#dayPart").attr('disabled', true);
                    $('#dayPartRow').hide();
                } else {
                    $('#dayPartRow').show();
                    $("#dayPart").removeAttr('disabled');
                
                    if (leaveBalanceAmount >= 1) {
                        // Full day aur half day 
                        $("#fullDayOption").removeAttr('disabled');
                        $("#firstHalfOption").removeAttr('disabled');
                        $("#secondHalfOption").removeAttr('disabled');
                    } else if (leaveBalanceAmount >= 0.5 && leaveBalanceAmount < 1) {
                        // Only half day
                        $("#fullDayOption").attr('disabled', true);
                        $("#firstHalfOption").removeAttr('disabled');
                        $("#secondHalfOption").removeAttr('disabled');
                    }
                }
                
                $('#status').fadeOut(); 
                $('#preloader').fadeOut();
            },
            error: function (data) {
                console.error('Error fetching leave balance');
                new PNotify({
                    title: 'Error',
                    text: 'Failed to fetch leave balance',
                    type: 'error',
                    delay: 1500,
                });
                $('#status').fadeOut(); 
                $('#preloader').fadeOut();
            }
        });
    }

    // Function: Shift rules validate 
    function validateShiftRules(selectedDate, halfDayType) {
        var baseurl = document.getElementById('baseurl').value;
        var formattedDate = moment(selectedDate).format('YYYY-MM-DD');
        
        $('#status').fadeIn(); 
        $('#preloader').fadeIn();
        
        $.ajax({
            type: 'GET',
            url: baseurl + '/admin-apply-leave/get-leave-eligibility',
            data: {
                user_id: selectedUserId,
                leave_type: selectedLeaveId,
                day_part: halfDayType,
                selected_date: formattedDate
            },
            success: function(response) {
                if (!response.half_day_allowed) {
                    $('#dayPartMessage').text(response.message).show();
 
                    $("#applyleave").attr('disabled', true);
                } else {
                    $('#dayPartMessage').hide();

                      if ($('#reason').val().trim().length >= 10) {
                            $("#applyleave").removeAttr('disabled');
                        } else {
                            $("#applyleave").attr('disabled', true);
                        }
                }
                
                $('#status').fadeOut(); 
                $('#preloader').fadeOut();
            },
            error: function() {
                console.error('Error validating shift rules');
                $("#applyleave").attr('disabled', true);
                $('#status').fadeOut(); 
                $('#preloader').fadeOut();
            }
        });
    }

    function calculateLeaveDuration() {
        var from_date = $('#from_date').datepicker('getDate');
        var to_date = $('#to_date').datepicker('getDate');

        if (!from_date || !to_date) {
            $('#result').val('');
            return;
        }

        var start = moment(from_date);
        var end   = moment(to_date);

        var days = end.diff(start, 'days') + 1;

        $('#result').val(days);
    }

    // Inside the to_date changeDate event
    $('#to_date').on('changeDate', function() {
        var fromDate = $('#from_date').datepicker('getDate');
        var toDate = $(this).datepicker('getDate');
        $('#durationMessage').hide();
        
        if (fromDate && toDate) {
            // Call server to calculate working days
            calculateWorkingDaysFromServer();
        }
    });

    function calculateWorkingDaysFromServer() {
        var baseurl = document.getElementById('baseurl').value;
        var fromDate = moment($('#from_date').datepicker('getDate')).format('YYYY-MM-DD');
        var toDate = moment($('#to_date').datepicker('getDate')).format('YYYY-MM-DD');
        
        $.ajax({
            type: 'POST',
            url: baseurl + '/admin-apply-leave/calculate-leave-duration',
            data: {
                user_id: selectedUserId,
                leave_id: selectedLeaveId, 
                from_date: fromDate,
                to_date: toDate,
                leave_type: 'full_day',
                _token: $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                $('#result').val(response.duration);
                
                // Check balance
                if (response.duration > leaveBalanceAmount) {
                    $('#durationMessage').text('Insufficient balance! Required: ' + response.duration + ', Available: ' + leaveBalanceAmount.toFixed(2)).show();
                    $("#reason").attr('disabled', true);
                    $("#applyleave").attr('disabled', true);
                } else {
                    $('#durationMessage').hide();
                    $("#reason").removeAttr('disabled');
                    
                    if ($('#reason').val().trim().length >= 10) {
                        $("#applyleave").removeAttr('disabled');
                    }
                }
            },
            error: function() {
                console.error('Error calculating leave duration');
            }
        });
    }


    function resetAllFields() {
        $("#leaveName").val('');
        $("#leaveBalance").val('');
        $("#dayPart").val('');
        $("#leavetype").val('');
        $("#from_date").val('');
        $("#to_date").val('');
        $("#reason").val('');
        $("#halfdaytype").val('');
        $("#result").val('');
        
        $('#dayPartRow').hide();
        $('#leaveTypeRow').hide();
        $('.fullday, .halfday, .halfday1, .halfdaytype').hide();
        $('#dayPartMessage').hide();
        $('#durationMessage').hide();
        $('#msg').text('');
        
        $("#dayPart, #from_date, #to_date, #reason, #halfdaytype").attr('disabled', true);
        $("#applyleave").attr('disabled', true);
        
        leaveBalanceAmount = 0;
        selectedLeaveId = '';
    }

    function resetFieldsAfterLeaveType() {
        $("#dayPart").val('');
        $("#leavetype").val('');
        $("#from_date").val('');
        $("#to_date").val('');
        $("#reason").val('');
        $("#halfdaytype").val('');
        $("#result").val('');
        
        $('#dayPartRow').hide();
        $('#leaveTypeRow').hide();
        $('.fullday, .halfday, .halfday1, .halfdaytype').hide();
        $('#dayPartMessage').hide();
        $('#durationMessage').hide();
        $('#msg').text('');
        
        $("#dayPart, #from_date, #to_date, #reason, #halfdaytype").attr('disabled', true);
        $("#applyleave").attr('disabled', true);
    }

    // Initialize Datepickers
    var startDate = new Date(new Date().getFullYear(), 0, 1);
    var endDate = new Date(new Date().getFullYear(), 12, 0);
    
    $("#from_date").datepicker({
        autoclose: true,
        startDate: startDate,
        endDate: endDate
    });

    $("#to_date").datepicker({
        autoclose: true,
        startDate: startDate,
        endDate: endDate
    });

    // Textarea trim on load
    $('textarea').each(function() {
        $(this).val($(this).val().trimLeft());
    });

    // Form submit se pehle disabled fields enable karo
    $('form').on('submit', function() {
        $("#leavetype, #leaveName, #user_id, #dayPart, #halfdaytype, #from_date, #to_date, #reason").removeAttr('disabled');
    });
});
</script>

<style>
    .intro{
        display: none;
    }
    #reason{
        border: 0.1px solid lightgrey;
        border-top: 0.1px solid lightgrey!important;
    }
    #dayPartMessage, #durationMessage {
        display: block;
        font-size: 12px;
        margin-top: 5px;
        font-weight: 500;
    }
    select option:disabled {
        color: #ccc !important;
    }
</style> 
@endsection