@extends('layouts.master')
@section('content')

<style>
    /* Scrollbar Track */
    .table-responsive::-webkit-scrollbar {
        width: 10px;
        /* Set the width of the scrollbar */
    }

    /* Scrollbar Thumb */
    .table-responsive::-webkit-scrollbar-thumb {
        background: #888;
        /* Color of the thumb */
        border-radius: 5px;
        /* Round the corners of the thumb */
    }

    /* Scrollbar Track on Hover */
    .table-responsive::-webkit-scrollbar-thumb:hover {
        background: #555;
        /* Change color on hover */
    }

    /* Scrollbar Track */
    .table-responsive::-webkit-scrollbar-track {
        background: #f1f1f1;
        /* Color of the track */
    }

    /* Scrollbar Track on Hover */
    .table-responsive::-webkit-scrollbar-track:hover {
        background: #ddd;
        /* Change color on hover */
    }

    .table-responsive {
        cursor: pointer;
    }
</style>
<!-- Main Content-->
<div class="main-content side-content pt-0">

    <div class="main-container container-fluid">
        <div class="inner-body">

            <!-- Page Header -->
            <div class="page-header">
                <div>
                    <h2 class="main-content-title tx-24 mg-b-5">Find Employee Payslip
                    </h2>
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
                        <li class="breadcrumb-item active" aria-current="page">PaySlip</li>
                    </ol>
                </div>

                <div>
                    <!-- <button type="button" class="btn btn-white btn-icon-text my-2 me-2">
                            <i class="fe fe-download me-2"></i> Import
                        </button> -->

                        <!-- <a class="btn btn-success" href="{{route('fetch.payslip.report')}}" download> <i class="fe fe-download-cloud me-2"></i> Download</a> -->
                        
                        <a class="btn btn-success my-2 btn-icon-text" data-bs-target="#monthly-report" data-bs-toggle="modal"
                            href=""> <i class="fe fe-download-cloud me-2"></i> Monthly Reports</a>
                        <a class="btn btn-success my-2 btn-icon-text" data-bs-target="#indivisualy-report" data-bs-toggle="modal"
                            href=""> <i class="fe fe-download-cloud me-2"></i> Indivisualy Reports</a>
                        <a class="btn btn-success my-2 btn-icon-text" data-bs-target="#yearly-report" data-bs-toggle="modal"
                            href=""> <i class="fe fe-download-cloud me-2"></i> Yearly Reports</a>
 
                    <!-- <a class="btn  btn-success ms-2" href="{{route('create_payslip')}}"> <i
                            class="fe fe-plus"></i></a> -->
                </div>
            </div>

            @if(session('message'))
            <div class="alert alert-success">
                {{ session('message') }}
            </div>
            @endif


            <div class="row row-sm">
                <div class="col-lg-12 col-md-12">
                    <div class="card custom-card">
                        <form method="post" action="{{route('search.pay.slip')}}">
                            @csrf
                            <div class="card-body">
                                <div class="row row-sm">

                                    <div class="col-md-6">
                                        <label class="">Employee Id</label>
                                        <select class="form-control select2-with-search" name="user_id" type="text" required>
                                            @if(isset($emps))
                                            <option value="*">All</option>
                                            @foreach($emps as $emp)
                                            <option value="{{$emp?$emp->id:''}}">
                                                {{$emp?$emp->employe_id:''}}-({{$emp?$emp->name:''}})
                                            </option>
                                            @endforeach
                                            @endif
                                        </select>
                                    </div>
                                    <div class="col-md-4 mt-1 ">
                                        <label class="">Payable Month</label>
                                        <select name="month" class="form-control select2-with-search" type="text">
                                            <option value="">Select Month</option>
                                            <option value="January">January</option>
                                            <option value="February">February</option>
                                            <option value="March">March</option>
                                            <option value="April">April</option>
                                            <option value="May">May</option>
                                            <option value="June">June</option>
                                            <option value="July">July</option>
                                            <option value="August">August</option>
                                            <option value="September">September</option>
                                            <option value="October">October</option>
                                            <option value="November">November</option>
                                            <option value="December">December</option>
                                        </select>


                                        <!-- <a class="btn ripple btn-info" data-bs-target="#scrollingmodal" data-bs-toggle="modal" href="">  <i class="fe fe-edit"></i></a> -->

                                    </div>
                                    <div class="col-md-2 " style="margin-top: 30px;">

                                        <button class="btn ripple btn-success" type="submit">Submit</button>
                                    </div>



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


    <div class="row-sm">
        <div class="card custom-card">
            <div class="card-body">
                <form method="post" action="{{route('search.filter')}}">
                    @csrf
                    <div class="row">
                        <div class="col-md-6 ">
                            <label class="">Employee Id</label>
                            <select class="form-control select2-with-search" name="user_id" type="text" required>
                                @if(isset($emps))
                                <option value="*">All</option>
                                @foreach($emps as $emp)
                                <option value="{{$emp?$emp->id:''}}">
                                    {{$emp?$emp->employe_id:''}}-({{$emp?$emp->name:''}})
                                </option>
                                @endforeach
                                @endif
                            </select>
                        </div>
                        <div class="col-md-6 d-flex mt-4">
                            <input type="date" name='payslip_month' class="form-control" required>
                            <button class="btn ripple btn-success ms-2" type="submit"><i class="fe fe-search"></i></button>
                            <a class="btn ripple btn-danger ms-2" href="{{route('reset.pay.filter')}}"><i class="fe fe-slash"></i></a>
                        </div>


                    </div>
                </form>

                <div class="table-responsive mt-5">
                    <table class="table table-bordered overflow-scroll" id="exportexample">
                        <thead>
                            <tr>
                                <th class="wd-25p">Emp ID</th>
                                <th class="wd-25p">Name</th>
                                <th class="wd-25p">PayrollType</th>
                                <th class="wd-25p">Salary</th>
                                <th class="wd-25p">PerDay</th>
                                <th class="wd-25p">TotalLeaves</th>
                                <th class="wd-25p">Deduction</th>
                                <th class="wd-25p">T.P.D</th>
                                <th class="wd-25p">NetSalary</th>
                                <th class="wd-25p">PayableSalary</th>
                                <th class="wd-25p">PayableMonth</th>
                                <th class="wd-25p">SlipStatus</th>
                                <th class="wd-25p">Status</th>
                                <th class="wd-25p">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if(isset($data))
                            @foreach($data as $d)
                            <tr>
                                <td>{{$d && $d->user? $d->user->employe_id:''}}</td>
                                <td>{{$d && $d->user?$d->user->name:''}}</td>
                                <td>{{$d && $d->getssalary?$d->getssalary->payroll_type:''}}</td>
                                <td>{{$d?$d->salary:''}}</td>
                                <td>{{$d?$d->perday:''}}</td>
                                <td>{{$d?$d->total_leaves:''}}</td>
                                <td>{{$d?$d->deduction:''}}</td>
                                <th>{{$d?$d->total_present_days:''}}</th>
                                <td>{{$d?$d->netsalary:''}}</td>
                                <td>{{$d?$d->final_salary:''}}</td>
                                <td>{{ $d->payslip_month ? strtoupper(date('M-y',
                                            strtotime($d->payslip_month))): '' }}</td>
                                <td>
                                    @if($d && $d->status == null)
                                    <span class="bg-danger p-1 rounded">Revert</span>
                                    @elseif($d&&$d->status==0)
                                    <span class="bg-success p-1 rounded">Generate</span>
                                    @endif
                                </td>

                                <td>
                                    @if($d && $d->paid_status==null)
                                    <span class="bg-danger p-1 rounded">Unpaid</span>
                                    @elseif($d && $d->paid_status==0)
                                    <span class="bg-success p-1 rounded">paid</span>
                                    @endif
                                </td>
                                <td>
                                    <div class="d-flex align-items-center">
                                        @if($d && $d->paid_status==null)
                                        <a class="btn  btn-success ms-2" data-bs-target="#scrollmodal" data-bs-toggle="modal" data-id="{{$d->id}}">
                                            Paid</a>
                                        @endif
                                        @if($d && $d->paid_status==null)
                                        <a class="btn ripple btn-warning ms-2" href="{{route('viewPayment', $d?$d->id:'')}}">Process</a>
                                        @endif
                                        <a class="btn  btn-info ms-2" href="{{route('edit.payslip',$d?$d->id:'')}}"> <i class="fe fe-edit"></i></a>
                                        <a class="btn  btn-danger ms-2" href="{{route('delete.payslip',$d?$d->id:'')}}"><i class="fe fe-trash"></i></a>
                                    </div>

                                </td>
                            </tr>
                            @endforeach
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal" id="scrollmodal">
                <div class="modal-dialog modal-dialog-scrollable" role="document">
                    <div class="modal-content modal-content-demo">
                        <div class="modal-header">
                            <h6 class="modal-title">Paid</h6><button aria-label="Close" class="btn-close" data-bs-dismiss="modal" type="button"></button>
                        </div>
                        <div class="modal-body">
                            <div class="card-body " style="margin-top: -20px;">
                                <div class="container">
                                    <form method="post" action="{{route('transaction.post')}}">
                                        {{ @csrf_field() }}

                                        <div class="row">

                                            <input type="hidden" name="user_id">
                                            <input type="hidden" name="id">
                                            <div class="form-group col-md-12">
                                                <div class="mb-3 font-weight-semibold">From</div>
                                                <input type="text" name='from_title' class="form-control" required>

                                            </div>

                                            <div class="form-group col-md-12">
                                                <div class="mb-3 font-weight-semibold">From Account Number</div>
                                                <input type="number" name='from_accountnumber' class="form-control" required>

                                            </div>

                                            <div class="form-group col-md-12">
                                                <div class="mb-3 font-weight-semibold">To</div>
                                                <input type="text" name='to_title' class="form-control" required>
                                            </div>

                                            <div class="form-group col-md-12">
                                                <div class="mb-3 font-weight-semibold">To Account Number</div>
                                                <input type="number" name='to_accountnumber' class="form-control" required>

                                            </div>


                                            <div class="form-group col-md-12">
                                                <div class="mb-3 font-weight-semibold">Amount</div>
                                                <input type="number" name='amount' placeholder="Amount" class="form-control" required>

                                            </div>
                                            <div class="form-group col-md-12">
                                                <div class="mb-3 font-weight-semibold">Date Picker</div>
                                                <input type="date" name='date' class="form-control" required>
                                            </div>

                                            <div class="form-group col-md-12">
                                                <div class="mb-3 font-weight-semibold">Transaction Id</div>
                                                <input type="text" name='transaction_id' class="form-control" required>
                                            </div>


                                            <div class="form-group col-md-12">
                                                <div class="mb-3 font-weight-semibold">Bank Name</div>
                                                <select name="bank_name" class="form-control" id="" required>
                                                    <option value="NBP">National Bank of Pakistan (NBP)</option>
                                                    <option value="HBL">Habib Bank Limited (HBL)</option>
                                                    <option value="UBL">United Bank Limited (UBL)</option>
                                                    <option value="MCB">MCB Bank Limited</option>
                                                    <option value="ABL">Allied Bank Limited (ABL)</option>
                                                    <option value="BankAlfalah">Bank Alfalah</option>
                                                    <option value="FaysalBank">Faysal Bank</option>
                                                    <option value="BankAlHabib">Bank Al Habib</option>
                                                    <option value="AskariBank">Askari Bank</option>
                                                    <option value="SoneriBank">Soneri Bank</option>
                                                    <option value="Silkbank">Silkbank</option>
                                                    <option value="StandardChartered">Standard Chartered Bank
                                                    </option>
                                                    <option value="SummitBank">Summit Bank</option>
                                                    <option value="SindhBank">Sindh Bank</option>
                                                    <option value="BankIslami">BankIslami Pakistan</option>
                                                    <option value="BoK">The Bank of Khyber</option>
                                                    <option value="JSBank">JS Bank</option>
                                                    <option value="DIB">Dubai Islamic Bank</option>
                                                    <option value="AlBaraka">Al Baraka Bank</option>
                                                    <option value="MeezanBank">Meezan Bank</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="d-flex justify-content-end">
                                            <button class="btn btn-success" type="submit">Save</button>

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

                            </div>
                        </div>

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

{{-- Modal --}}

<!-- monthly Report Modal -->
<div class="modal" id="monthly-report">
               
               <div class="modal-dialog" role="document">
                   <div class="modal-content modal-content-demo">
                       <div class="modal-header">
                           <h6 class="modal-title">Monthly Payable Report</h6><button aria-label="Close" class="btn-close"
                               data-bs-dismiss="modal" type="button"></button>
                       </div>
                       <div class="modal-body">
                    <form method="post" action="{{route('monthly.payslip.report')}}">
                    @csrf
                           <h6>Report</h6>
                           <div class='input'>
                               <label for="" class='mt-4'>Employee Id</label>
                               <select onchange="getValue()"  class="form-select" aria-label="Default select example" name="user_id">
                               <option  value="All" selected>All</option>
                              
                               @if(isset($emps))
                               <!-- <option value="All">All</option> -->
                               @foreach ($emps as $e) 
                               <option value="{{$e?$e->id:''}}">{{$e?$e->employe_id:''}}</option>
                               @endforeach
                               @endif
                               </select>
                           </div>
                           <br>
                           <div class="col-md-12">
                            <div class="mg-b-30">
                                <div class="input-group">
                                    <div class="input-group-text border-end-0">
                                        <i class="fe fe-calendar lh--9 op-6"></i>
                                    </div>
                                    <input class="form-control" placeholder="SELECT MONTH" type="text" id="datepicker-month" name="month">
                                </div>
                            </div>
                        </div>
                         </div>
                          <div class="buttons d-flex justify-content-around align-items-center">
                           <button class="btn  btn-primary" type="submit">Monthly Payable Report </button>
                           <!-- <button class="btn  btn-primary" type="submit">Yearly Report</button> -->
                         </div>
                         <div class="modal-footer">
                           
                         </div>
                        </div>
                 </form>
               </div>
           </div>
           <!-- indivisualy Report Modal -->
           <div class="modal" id="indivisualy-report">
              
               <div class="modal-dialog" role="document">
                   <div class="modal-content modal-content-demo">
                       <div class="modal-header">
                           <h6 class="modal-title">Indiviual Payslip Report</h6><button aria-label="Close" class="btn-close"
                               data-bs-dismiss="modal" type="button"></button>
                       </div>
                       <div class="modal-body">
                    <form method="post" action="{{route('fetch.monthly.attendence.report')}}">
                    @csrf
                           <h6>Report</h6>
                           <div class='input'>
                               <label for="" class='mt-4'>Employee Id</label>
                               <select onchange="getValue()"  class="form-select" aria-label="Default select example" name="user_id">
                            
                               @if (isset($dataa))
                               <!-- <option value="All">All</option> -->
                               @foreach ($dataa as $dd) 
                               <option value="{{$dd->id}}">{{$dd->employe_id}}</option>
                               @endforeach
                               @endif
                               </select>
                           </div>
                           <br>
                           <label for="">Payable Month</label><br>
                           <div class="input-group">
                               <input class="form-control" placeholder="MM/DD/YYYY" type="date" name="start_date">
                           </div>
                           <br>
                          
                         </div>
                          <div class="buttons d-flex justify-content-around align-items-center">
                           <button class="btn  btn-primary" type="submit">Indivisualy AttendeceReport </button>
                           <!-- <button class="btn  btn-primary" type="submit">Yearly Report</button> -->
                         </div>
                         <div class="modal-footer">
                           
                         </div>
                        </div>
                 </form>
               </div>
           </div>

           <!-- Yearly Report Modal -->
           <div class="modal" id="yearly-report">
              
               <div class="modal-dialog" role="document">
                   <div class="modal-content modal-content-demo">
                       <div class="modal-header">
                           <h6 class="modal-title">Yearly Payslip Report</h6><button aria-label="Close" class="btn-close"
                               data-bs-dismiss="modal" type="button"></button>
                       </div>
                       <div class="modal-body">
                    <form method="post" action="{{route('year.payslip.report')}}">
                    @csrf
                           <h6>Report</h6>
                           <div class='input'>
                               <label for="" class='mt-4'>Employee Id</label>
                               <select onchange="getValue()"  class="form-select" aria-label="Default select example" name="user_id">
                               <option  value="All" selected>All</option>
                               @if(isset($emps))
                               <!-- <option value="All">All</option> -->
                               @foreach ($emps as $e) 
                               <option value="{{$e?$e->id:''}}">{{$e?$e->employe_id:''}}</option>
                               @endforeach
                               @endif
                               </select>
                           </div>
                           <br>
                           <div class="col-md-12">
                            <div class=" mg-b-30">
                                <div class="input-group">
                                    <div class="input-group-text border-end-0">
                                        <i class="fe fe-calendar lh--9 op-6"></i>
                                    </div>
                                    <input class="form-control  datepicker-year" placeholder="Year Range" type="text" id="datepicker-year" name="payslip_year">
                                </div>
                            </div>
                        </div>
                         </div>
                          <div class="buttons d-flex justify-content-around align-items-center">
                           <button class="btn  btn-primary" type="submit">Yearly Payslip Report </button>
                           <!-- <button class="btn  btn-primary" type="submit">Yearly Report</button> -->
                         </div>
                         <div class="modal-footer">
                           
                         </div>
                        </div>
                 </form>
               </div>
           </div>
{{-- End Modal --}}
</div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    $(document).ready(function() {
        $('#scrollmodal').on('show.bs.modal', function(event) {
            var button = $(event.relatedTarget);
            var id = button.data('id');
            var modal = $(this);
            $.ajax({
                url: '/fetch_payslip/' + id,
                method: 'GET',
                success: function(response) {

                    modal.find('input[name="id"]').val(id);
                    modal.find('input[name="user_id"]').val(response.user.id);
                    modal.find('input[name="from_title"]').val(response.getaccountdetails.account_title);
                    modal.find('input[name="from_accountnumber"]').val(response.getaccountdetails.account_number);
                    modal.find('input[name="amount"]').val(response.final_salary);

                },
                error: function(error) {
                    console.log(error);
                }
            });
        });
    });
</script>

@endsection