@extends('admin.layouts.app')
@section('title',get_setting('site_name').' Advance Salary')
@section('content')
    <style>
        loading-overlay {
            display: none; /* Hide the loading overlay by default */
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black overlay */
            z-index: 9999; /* Ensure the overlay is above everything else */
        }

        /* Styles for the spinner */
        .spinner {
            border: 4px solid rgba(255, 255, 255, 0.3); /* Spinner color and transparency */
            border-top: 4px solid #ffffff; /* Spinner color */
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 1s linear infinite; /* Spinner animation */
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -25px; /* Half of the height */
            margin-left: -25px; /* Half of the width */
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
    </style>
    <div class="row mt-3 mb-3">
        <div class="col-md-12 col-lg-12 col-xl-10 mx-auto">
            <div class="card">
                <div class="card-header">

                    <div class="row">
                        <div class="col-12 col-md-6 col-lg-6">
                            <h5>Advance Salary</h5>
                        </div>
                        <div class="col-12 col-md-6 col-lg-6 text-right">
                            <button class="btn btn-primary" onclick="advance_salary();"><i class="fas fa-plus"></i>Add
                                New
                            </button>

                            <a href="{{route('employee.advance.salary.export')}}" class="btn btn-primary">Export</a>
                        </div>
                    </div>
                </div>

                <div class="card-body">
                    <form action="" method="get">

                        <div class="row">
                            <div class="col">
                                <table class="float-right text-right mb-3">
                                    <tr>
                                        <td>
                                            <select name="staff_id" id="" class="form-control">
                                                <option value="">Please Select Staff</option>
                                                @foreach(\App\Models\Staff::all() as $staff)
                                                    <option value="{{$staff->id}}">{{$staff->user->name}}</option>
                                                @endforeach
                                            </select></td>

                                        <td>
                                        <td>
                                            <select name="year" id="" class="form-control">
                                                <option value="">Please Select Year</option>
                                                @for($i=2020;$i<=date('Y');$i++)
                                                    <option value="{{$i}}">{{$i}}</option>
                                                @endfor
                                            </select></td>

                                        <td>
                                            <select name="month" id="" class="form-control">
                                                <option value="">Please Select Month</option>
                                                @for($i=1;$i<=12;$i++)
                                                    <option
                                                        value="{{$i}}">{{date("F", mktime(0, 0, 0, $i, 1))}}</option>
                                                @endfor
                                            </select>
                                        </td>

                                        <td>
                                            <select name="approval" id="" class="form-control">
                                                <option value="">Please Select Any one</option>

                                                <option value="1">{{__('Approve')}}</option>
                                                <option value="0">{{__('Not Approve')}}</option>

                                            </select>
                                        </td>


                                        <td>
                                            <button type="submit" class="btn btn-primary"><i class="fas fa-filter"></i>&nbsp;{{__('Filter')}}
                                            </button>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>

                    </form>
                    <table class="table table-responsive-lg">
                        <thead>
                        <tr>
                            <th>Staff Info</th>
                            <th>Apply Date</th>
                            <th>Payments Starts Form</th>
                            <th>Payment Duration</th>
                            <th>Advance Amount</th>
                            <th>Due Amount</th>
                            <th>Amount Type</th>
                            <th class="text-center">Status</th>
                            <th class="text-center">Action</th>

                        </tr>
                        </thead>
                        @foreach($advance_salary as $salary)
                            <tr>
                                <td>{{$salary->staff->user->name}}</td>
                                <td>{{$salary->apply_date}}</td>
                                <td>{{date("F", mktime(0, 0, 0, $salary->month, 1))}}{{__('-')}}{{$salary->year}}</td>
                                <td>{{$salary->duration}}{{__(' Month')}}</td>
                                <td>{{$salary->amount}}</td>
                                <td>
                                    @if($salary->status==1)
                                        @php $advace_salary_paid=\App\Models\advance_salary_received::where('advance_salary_id',$salary->id)->where('status',1)->sum('amount') @endphp
                                        {{$salary->amount-$advace_salary_paid}}
                                    @else
                                        {{__('0')}}
                                    @endif
                                </td>
                                <td>{{__('Advance Salary')}}</td>
                                <td class="text-center">
                                    @if($salary->status==1)
                                        <i class="fas fa-check-circle text-success fs-24"
                                           title="Approved by @if($salary->approved_by!=null) {{\App\Models\User::where('id',$salary->approved_by)->pluck('name')->first()}} @endif "></i>
                                    @else
                                        <i class="fas fa-times-circle text-danger fs-24"
                                           title="Not Approve"></i>
                                    @endif
                                </td>
                                <td class="text-center">
                                    @if($salary->status==1)
                                        <a href="{{route('advance.salary.view',$salary->id)}}" target="_blank"
                                           class="btn btn-primary btn-sm"><i
                                                class="fas fa-file-pdf"></i></a>
                                        @if(($salary->amount-$advace_salary_paid)>0)
                                            <a href="javascript:void(0)"
                                               class="btn btn-info btn-sm"
                                               onclick="advance_salary_Payment_Schedules_modal({{$salary->id}},{{$salary->amount}},{{$advace_salary_paid}},{{$salary->amount-$advace_salary_paid}})"><i
                                                    class="fas fa-eye"></i></a>
                                        @endif
                                    @else
                                        @can('Salary-edit')
                                            <a href="javascript:void(0)"
                                               class="btn btn-primary btn-sm"
                                               onclick="advance_salary_update('{{$salary->staff_id}}','{{$salary->amount}}','{{$salary->payment_method}}','{{$salary->duration}}','{{$salary->month}}','{{$salary->year}}','{{$salary->reason}}','{{$salary->apply_date}}',{{$salary->id}})"><i
                                                    class="fas fa-edit"></i></a>
                                        @endcan
                                        @can('Salary-delete')

                                            <a class="btn btn-danger btn-sm delete_modal"
                                               data-href="{{route('advance.salary.application.destroy',$salary->id)}}"
                                               href="javascript:void(0)"><i
                                                    class="fas fa-trash"></i></a>

                                        @endcan

                                    @endif



                                    @if($salary->status===0)
                                        @can('Salary-Approve')
                                            <a href="javascript:void(0)"
                                               class="btn btn-success btn-sm" title="Approval"
                                               onclick="advance_salary_approval({{$salary->id}})"><i
                                                    class="fas fa-check-circle"></i></a>
                                        @endcan
                                    @endif
                                </td>
                            </tr>
                        @endforeach

                        <tbody>
                        </tbody>
                    </table>
                    {{$advance_salary->links()}}
                </div>
            </div>
        </div>
    </div>
@endsection

@section('modal')
    <div class="modal fade" id="advance_salary_modal">
        <form action="{{route('admin.advance.salary')}}" method="POST">
            @csrf
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title h6">{{__('Advance Salary Application')}}</h5>
                        <button type="button" class="close" data-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row w-100 mb-3">
                            <div class="col-12 col-md-12 col-lg-12 text-right">
                                <h5>Apply Date: {{date('d-m-Y')}}</h5>
                            </div>
                        </div>

                        <div class="row">

                            <div class="col-12 col-md-4 col-lg-4">
                                <div class="form-group">
                                    <select class="form-control" name="staff_id" id="">
                                        <option value="">Please Select Staff</option>
                                        @foreach(\App\Models\Staff::all() as $staff)
                                            <option
                                                value="{{$staff->id}}">{{!empty($staff->user)?$staff->user->name:''}}
                                                ({{!empty($staff->user)?$staff->user->id:''}})
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                            </div>

                            <div class="col-12 col-md-4 col-lg-4">
                                <div class="form-group">
                                    <input class="form-control" placeholder="Advance Salary Amount" type="text"
                                           name="amount" id="" required>
                                </div>

                            </div>
                            <div class="col-12 col-md-4 col-lg-4">
                                <div class="form-group">
                                    <select name="payment_method" id="" class="form-control aiz-selectpicker"
                                            data-live-search="true" required>
                                        <option value="">Select Payment Method</option>
                                        <option value="salary_deduction">Salary Deduction</option>
                                        <option value="cash">By Cash</option>

                                    </select>
                                </div>

                            </div>
                        </div>

                        {{--                        <input type="text" name="" value="" id="holiday_id">--}}
                        <div class="row">

                            <div class="col-12 col-md-4 col-lg-4">
                                <div class="form-group">
                                    <input class="form-control" placeholder="Payment Duration (Months)" type="text"
                                           name="duration"
                                           id="" required>
                                </div>

                            </div>
                            <div class="col-12 col-md-4 col-lg-4">
                                <div class="form-group">
                                    <select name="month" id="" class="form-control">
                                        <option value="">Payment Start From</option>
                                        @for($i=1;$i<=12;$i++)
                                            <option
                                                value="{{$i}}">{{date("F", mktime(0, 0, 0, $i, 1))}}</option>
                                        @endfor
                                    </select>
                                </div>


                            </div>
                            <div class="col-12 col-md-4 col-lg-4">
                                <div class="form-group">
                                    <select name="year" id="" class="form-control">
                                        <option value="">Please Select Year</option>
                                        @for($i=2023;$i<=date('Y')+5;$i++)
                                            <option value="{{$i}}">{{$i}}</option>
                                        @endfor
                                    </select>
                                </div>

                            </div>
                        </div>


                        <div class="row mb-3">
                            <div class="col-12 col-md-12 col-lg-12">
 <textarea name="reason" id="" cols="30" rows="3" class="form-control "
           placeholder="Type Your Reason" required></textarea>
                            </div>

                        </div>


                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-dismiss="modal">{{__('Cancel')}}</button>
                        <button data-toggle="tooltip" data-placement="top" type="submit" id="saveBtn"
                                class="btn btn-primary">{{__('Save')}}</button>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <div class="modal fade" id="advance_salary_modal_update">
        <form action="{{route('admin.advance.salary.update')}}" method="POST">
            @csrf
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title h6">{{__('Advance Salary Application Update')}}</h5>
                        <button type="button" class="close" data-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row w-100 mb-3">
                            <div class="col-12 col-md-12 col-lg-12 text-right">
                                <h5>Apply Date: <span id="apply_date"></span></h5>
                            </div>
                        </div>

                        <div class="row mb-3 w-100">
                            <input type="hidden" name="apply_date" id="apply_dates">
                            <input type="hidden" name="id" id="id">
                            <div class="col-12 col-md-4 col-lg-4">
                                <select class="form-control" name="staff_id" id="staff_id">
                                    <option value="">Please Select Staff</option>
                                    @foreach(\App\Models\Staff::all() as $staff)
                                        <option value="{{$staff->id}}">{{$staff->user->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-12 col-md-4 col-lg-4">
                                <input class="form-control" placeholder="Advance Salary Amount" type="text"
                                       name="amount" id="amount" required>
                            </div>
                            <div class="col-12 col-md-4 col-lg-4">
                                <select name="payment_method" id="payment_method" class="form-control aiz-selectpicker"
                                        data-live-search="true" required>
                                    <option value="">Select Payment Method</option>
                                    <option value="salary_deduction">Salary Deduction</option>
                                    <option value="cash">By Cash</option>

                                </select>
                            </div>
                        </div>

                        {{--                        <input type="text" name="" value="" id="holiday_id">--}}
                        <div class="row mb-3 w-100">
                            <div class="col-12 col-md-4 col-lg-4">
                                <input class="form-control" placeholder="Payment Duration (Months)" type="text"
                                       name="duration"
                                       id="duration" required>
                            </div>
                            <div class="col-12 col-md-4 col-lg-4">
                                <select name="month" id="month" class="form-control">
                                    <option value="">Payment Start From</option>
                                    @for($i=1;$i<=12;$i++)
                                        <option
                                            value="{{$i}}">{{date("F", mktime(0, 0, 0, $i, 1))}}</option>
                                    @endfor
                                </select>

                            </div>
                            <div class="col-12 col-md-4 col-lg-4">
                                <select name="year" id="year" class="form-control">
                                    <option value="">Please Select Year</option>
                                    @for($i=2023;$i<=date('Y')+5;$i++)
                                        <option value="{{$i}}">{{$i}}</option>
                                    @endfor
                                </select>
                            </div>
                        </div>


                        <div class="row mb-3 w-100">
                            <div class="col-12 col-md-12 col-lg-12">
 <textarea name="reason" id="reason" cols="30" rows="3" class="form-control "
           placeholder="Type Your Reason" required></textarea>
                            </div>

                        </div>


                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-dismiss="modal">{{__('Cancel')}}</button>
                        <button data-toggle="tooltip" data-placement="top" type="submit" id="saveBtn"
                                class="btn btn-primary">{{__('Update')}}</button>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <div class="modal fade" id="advance_salary_Approval_modal">
        <form action="{{route('advance.salary.approval')}}" method="POST">
            @csrf
            <div class="modal-dialog modal-md">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title h6">{{__('Advance Salary Application Approval')}}</h5>
                        <button type="button" class="close" data-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" name="advance_salary_id" id="advance_salary_id">
                        <p><i class="fas fa-check-circle"></i>&nbsp;{{__('Are you sure you want to approve this?')}}</p>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-dismiss="modal">{{__('Cancel')}}</button>
                        <button data-toggle="tooltip" data-placement="top" type="submit" id=""
                                class="btn btn-primary">{{__('Approval')}}</button>
                    </div>
                </div>
            </div>
        </form>
    </div>


    <div class="modal fade" id="advance_salary_Payment_Schedules_modal">
        <form action="{{route('advance.salary.cash.store')}}" method="POST">
            @csrf
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title h6">{{__('Advance Salary Payment Schedules')}}</h5>
                        <button type="button" class="close" data-dismiss="modal"></button>
                    </div>

                    <div class="modal-body">
                        <table class="table" id="Info_hide_show">
                            <tr class="tr_line_height">
                                <td><h6>Approved Amount:<span id="approval_amount"></span></h6></td>
                                <td><h6>Collected Amount:<span id="collected_amount"></span></h6></td>


                            </tr>
                            <tr class="tr_line_height">
                                <td><h6>Due Amount:<span id="due_amount"></span></h6></td>
                                <td><h6>Scheduled Amount:<span id="schudled_amount"></span></h6></td>
                            </tr>
                        </table>
                        <div class="div" id="data_show"></div>
                        <!-- Loading spinner -->
                        <div class="loading-overlay" id="loadingOverlay">
                            <div class="spinner"></div>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-info text-left" id="addRowBtn">Add Row</button>
                        <button type="button" class="btn btn-light" data-dismiss="modal">{{__('Cancel')}}</button>
                        <button data-toggle="tooltip" data-placement="top" type="submit"
                                id="advance_salary_received_btn"
                                class="btn btn-primary">{{__('Save All')}}</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@section('script')
    <script !src="">
        function advance_salary_approval(id) {
            $('#advance_salary_id').val(id);
            $('#advance_salary_Approval_modal').modal('show');
        }

        function advance_salary() {
            $('#advance_salary_modal').modal('show');
        }

        function advance_salary_update(staff_id, amount, payment, duration, month, year, reason, apply_date, id) {
            $('#payment_method').val(payment);
            $('#duration').val(duration);
            $('#amount').val(amount);
            $('#month').val(month);
            $('#year').val(year);
            $('#reason').val(reason);
            $('#staff_id').val(staff_id);
            $('#apply_date').html(apply_date);
            $('#apply_dates').val(apply_date);
            $('#id').val(id);
            $('#advance_salary_modal_update').modal('show');
        }


        function advance_salary_Payment_Schedules_modal(id, total_amount, paid_amount, due_amount) {
            $.ajax({
                url: '{{route('advance.salary.cash')}}',
                method: 'GET',
                data: {id: id},
                success: function (res) {
                    if (res) {
                        $('#data_show').html(res);
                        $('#Info_hide_show').show();
                        $('#approval_amount').html(total_amount);
                        $('#collected_amount').html(paid_amount);
                        $('#due_amount').html(due_amount);
                        $('#schudled_amount').html(total_amount);
                        $('#loadingOverlay').hide();

                    } else {
                        $('#data_show').html('Loading...');
                    }


                }
            });

            $('#Info_hide_show').hide();
            $('#data_show').html('');
            $('#loadingOverlay').show();
            $('#advance_salary_Payment_Schedules_modal').modal('show');


        }


        function amountValidation_check() {
            var totalSum = 0;
            var total_amount = parseFloat($('#approval_amount').html())
            $('.amount_check').each(function () {
                // Get the value of each element and convert it to a number for addition
                var value = parseFloat($(this).val()) || 0; // Use parseFloat to handle decimal numbers

                // Add the value to the totalSum
                totalSum += value;
            });
            if (total_amount === totalSum) {
                $('#advance_salary_received_btn').show();
            } else {
                alert('Your Approved amount and scheduled amount not same. Please calculate again');
                $('#advance_salary_received_btn').hide();

            }
        }

        $(document).ready(function () {
            // Function to handle row deletion
            $(document).on('click', '#advance_salary_table .deleteRowBtn', function () {
                var $row = $(this).closest('tr');

                // Check if the row has the 'tempRow' class
                if (!$row.hasClass('templateRow')) {
                    $row.remove();
                    amountValidation_check();
                } else {
                    alert("You can't delete this row.");
                }

            });

            // Function to clone row when 'Add Row' button is clicked
            $('#addRowBtn').click(function () {
                // Clone the hidden template row
                var clonedRow = $('.templateRow').clone().removeClass('templateRow');
                clonedRow.find('input').prop('readonly', false);
                // Append the cloned row to the table body
                $('#advance_salary_table tbody').append(clonedRow);
                amountValidation_check();
            });
        });

        function makePayment(id) {
            var token = $('meta[name="csrf-token"]').attr('content');
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': token
                },
                url: '{{route('advance.salary.cash.payment')}}',
                method: 'POST',
                data: {id: id},
                success: function (res) {
                    if (res) {

                        $('#loadingOverlay').hide();
                        $('#data_show').html(res);

                    } else {
                        $('#data_show').html('Loading...');
                    }


                }
            });
            $('#data_show').html('');
            $('#loadingOverlay').show();

        }
    </script>
@endsection