@extends('member-new')
@push('head-script')
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/responsive.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/components.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/vendors.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/extensions/toastr.min.css">
    <link rel="stylesheet" href="/assets/plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css">
    <link rel="stylesheet" href="/assets/css/daterangepicker.css">
    <!-- BEGIN: Page 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/pickers/form-flat-pickr.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">{{trans('request/request.requests')}}</h2>
        <div class="breadcrumb-wrapper">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="/">{{trans('common/common.home')}}</a>
                </li>
                <li class="breadcrumb-item active">Requests
                </li>
            </ol>
        </div>
    </div>
</div>
@endpush
@section('content')
<div class="content-header-right text-end col-md-12">
    <div class="form-group breadcrumb-right">
        <div class="row">
            <div class="col-md-8">
                 
            </div>
            <div class="col-md-4">
                <button class="btn-icon btn btn-primary btn-round btn-sm dropdown-toggle" type="button"
                        data-bs-toggle="offcanvas" data-bs-target="#offcanvasEnd" aria-controls="offcanvasEnd"
                        type="button"><i data-feather='filter'></i></button>
            </div>
        </div>
    </div>
</div>
@include('filtters.common',$fillterData)
<!-- Column Search -->
<section id="column-search-datatable">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-datatable">
                    <div class="card-header border-bottom p-1">
                        <div class="head-label">
                            <h3 class="mb-0">Advance Requests</h3>
                        </div>
                    </div>
                    <table class="dt-column-search table table-responsive" id="organization">
                        <thead>
                            <th>{{ trans('master/master.sn') }}</th>
                            <th>{{ trans('approval/master.employee') }}</th>
                            <th>{{ trans('approval/master.amount') }}</th>
                            <th>{{ trans('master/master.request_date') }}</th>
                            <th>{{ trans('master/master.update_date') }}</th>
                            <th>{{ trans('master/master.approval_level') }}</th>
                            <th>{{ trans('master/master.status') }}</th>
                            <th>{{ trans('master/master.payment_status') }}</th>
                            <th>{{ trans('master/master.action') }}</th>
                        </thead>
                        <tbody>
                            <tbody>

                                @foreach ($allRequests as $key => $requestData)
                                <tr>
                                    <td>{{ $allRequests->firstItem() + $key }}</td>
                                    <td>{{ucfirst($requestData->employee->name)}} ({{ucfirst($requestData->employee->employee_code)}})</td>
                                    <td>{{ucfirst($requestData->amount)}}</td>
                                    <td>{{ $requestData->created_at->format('d-m-Y')}}</td>
                                    <td>{{ $requestData->updated_at->format('d-m-Y')}}</td>
                                    <td>{{ $requestData->approver_level}}</td>
                                    <td><span title="{{$requestData->remarks}}">{{ucfirst($requestData->status)}}</span></td>
                                    <td><span >{{ucfirst($requestData->payment_status)}}</span></td>
                                    <td>
                                        <div class="mb-1">
                                            @if($requestData->payment_status == 'Pending')
                                                <a class="btn btn-primary sa-params advance-payment-status-btn"
                                                    href="javascript:void(0);" data-id="{{ $requestData->id }}"
                                                   ><span class="align-middle">
                                                         Update Payment Status</span>
                                                </a>
                                               
                                            @endif
                                            @if($requestData->payment_status == 'Paid')
                                            <button  class="btn btn-primary sa-params" onclick="printPaymentSlip({{ $requestData->id }})">Print</button>
                                            @endif
                                        </div>
                                        
                                    </td>
                                </tr>
                                @endforeach
                                @if($allRequests->isEmpty())
                                <tr><td colspan="5" class="text-center"> Record not found</td></tr>
                                @endif

                        </tbody>
                    </table>
                    {{ $allRequests->links('pagination::bootstrap-4') }}
                </div>
            </div>
        </div>
    </div>
</section>

  <!-- Modal -->
  <div class="modal fade" id="advancebasicModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <form class="form" method="POST" id="advancePaymentForm" >
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel1">Advance Payment</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <input type="hidden" id="advance-req-id" name="id" value=""/>
            <div class="row">
                <div class="col mb-1">
                    <div>
                    <label for="" class="form-label">Status<span class="mendatory-field text-danger">*</span></label>
                    <select  class="form-control"name="status">
                        <option value="">Select</option>
                        <option value="Paid">Paid</option>
                        <option value="Unpaid">Unpaid</option>
                    </select>
                    </div>
                </div>
            </div>
            <div class="row g-4">
                <div class="col mb-0">
                    <label for="" class="form-label">Remarks<span class="mendatory-field text-danger">*</span></label>
                    <textarea name="remarks" class="form-control" style="width: 100%" ></textarea>
                </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary" id="advance-payment-submit">Update</button>
          
        </div>
        
        </form>
      </div>
    </div>
@endsection 
@push('footer-script') 
    <!-- BEGIN: Page Vendor JS-->
    <script src="/app-assets/vendors/js/tables/datatable/jquery.dataTables.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/dataTables.bootstrap5.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/dataTables.responsive.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/responsive.bootstrap5.js"></script>
    <script src="/app-assets/vendors/js/pickers/flatpickr/flatpickr.min.js"></script>
    <script src="/app-assets/js/scripts/ui/ui-feather.js"></script>

    <script type="text/javascript" src="/assets/js/moment.min.js"></script>
    <script type="text/javascript" src="/assets/js/daterangepicker.js"></script>
    <link rel="stylesheet" type="text/css" href="/assets/css/daterangepicker.css" />

    <script src="/app-assets/vendors/js/tables/datatable/datatables.checkboxes.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/datatables.buttons.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/jszip.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/pdfmake.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/vfs_fonts.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/buttons.html5.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/buttons.print.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/dataTables.rowGroup.min.js"></script>
    <!-- END: Page Vendor JS-->
    <script src="/app-assets/vendors/js/extensions/toastr.min.js"></script>

    <!-- BEGIN: Page JS-->
    <script src="/app-assets/js/scripts/tables/table-datatables-basic.js"></script>
    <script src="/app-assets/js/scripts/tables/table-datatables-advanced.js"></script>
    <!-- END: Page JS-->
    <script src="/app-assets/vendors/js/forms/select/select2.full.min.js"></script>
    <script src="{{ asset('js/common-script.js') }}"></script>
    <script src="{{ asset('js/sweetalert.js') }}"></script>
    <script>
   
        $(window).on('load', function() {
            if (feather) {
                feather.replace({
                    width: 14,
                    height: 14
                });
            }
        });  
        $( document ).ready(function() {
            $('.select2').select2();
        });
        $('.advance-payment-status-btn').on('click', function() {
            var id = $(this).attr("data-id");
            $('#advance-req-id').val(id);
            $('#advancebasicModal').modal('show');
        });
</script>
<script>
    $(function() {
        $('body').on('click', '#advance-payment-submit', function() {
           
            var url = "{!! route('advance-payment-update', ['alias' => $alias]) !!}";
            var token = "{{ csrf_token() }}";
            var formData = $('#advancePaymentForm').serialize();
            Swal.fire({
                html: 'Do you really want to update payment status',
                title:'Alert',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#DD6B55',
                confirmButtonText: 'Confirm',
                cancelButtonText: 'Cancel'
            }).then((result) => {
                if (result.value) {
                    $.ajax({
                        type: 'POST',
                        url: url,
                        data: formData + '&_token=' + token + '&_method=POST',
                        success: function($response) {
                            Swal.fire("Success!", $response.message, "success");
                            setTimeout(function() {
                                window.location.href = url;
                            }, 2100);
                        },
                        error: function($response) {
                            if ($response.status === 422) {
                                if (
                                    Object.size($response.responseJSON) > 0 &&
                                    Object.size($response.responseJSON.errors) > 0
                                ) {
                                    $('.error').remove();
                                    show_validation_error($response.responseJSON.errors);
                                }
                            } else {
                                Swal.fire(
                                    "Info!",
                                    $response.responseJSON.message,
                                    "warning"
                                );
                                setTimeout(function() {}, 1200);
                            }
                        },
                    });
                }   
            });
        });
    });
</script>
    
<script>
    function printSlip(paymentHtml) {
        const printWindow = window.open('', '', 'height=600,width=800');
        printWindow.document.write(paymentHtml);
        printWindow.document.close();
        printWindow.focus();
        printWindow.print();
    }
    function printPaymentSlip(paymentId) {
        var url= '{{ url('member/'.$alias.'/advance/payment/slip')}}/'+paymentId;
        fetch(url)
            .then(response => response.text())
            .then(html => printSlip(html))
            .catch(error => console.error('Error fetching payment slip:', error));
    }
</script>

@endpush