@extends('layouts.master')
@section('css')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" type="text/css" />
    <link href="{{ URL::asset('assets/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css" rel="stylesheet" type="text/css" />
    <!--datatable responsive css-->
    <link href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap.min.css" rel="stylesheet"
        type="text/css" />
    <link href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css" />

    <style>
        .buttons-html5,
        .buttons-print {
            background: #405189 !important;
            color: white !important;
            margin: 5px !important;
            height: 31px !important;
            width: 70px !important;
            border-radius: 5px !important;
        }
    </style>
@endsection
@section('title')
    Employees Salary Details
@endsection
@section('content')
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="p-3">
                    @if (session()->has('message'))
                        <div class="alert alert-success" role="alert">
                            {{ session('message') }}
                        </div>
                    @endif
                </div>
                <div class="card-header d-flex phcl-flx">
                    <h4 class="card-title mb-0 flex-grow-1">
                        Employees Salary Details
                    </h4>
                </div>
                    <div class="card-body">
                       <div class="row mb-2">
                        {{-- <div class="col-md-3 col-sm-6 mb-2">
                            <label for="" class="form-label">Month</label>
                            <input type="month" name="month" value="{{ date('Y-m') }}" id="month" class="form-control">
                        </div> --}}
                        @php
                            $week_start = Carbon\Carbon::now()->startOfWeek()->format('Y-m-d');
                            $week_end = Carbon\Carbon::now()->endOfWeek()->format('Y-m-d');
                        @endphp
                         <div class="col-md-3 col-sm-6 mb-2">
                            <label for="" class="form-label">Start Date</label>
                            <input type="date" name="start_date" id="start_date" value="{{ $week_start }}" class="form-control">
                        </div>
                          <div class="col-md-3 col-sm-6 mb-2">
                            <label for="" class="form-label">End Date</label>
                            <input type="date" name="end_date" id="end_date" value="{{ $week_end }}" class="form-control">
                        </div>
                        <div class="col-4 mt-4 md-1 daybk-rt-btns mb-2">
                            <button type="button" name="filter" id="filter" class="btn btn-sm btn-primary"><i
                                    class="ri-search-line fs-6"></i></button>
                            <button type="button" name="refresh" id="refresh" class="btn btn-sm btn-danger"><i
                                    class="ri-refresh-line fs-6"></i></button>
                        </div>
                    </div>
                        <table id="fixed-header" class="table table-bordered dt-responsive nowrap table-striped align-middle"
                            style="width:100%">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Name</th>
                                    <th>Total Working Days</th>
                                    <th>Total Working Hours</th>
                                    <th>Avg Working Hours</th>
                                    <th>Total Salary</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>

                        </table>
                    </div>
            </div>
        </div>
    </div>
    </div>
    {{-- Salary Generate Modal --}}
    <div class="modal fade" id="generateSalaryModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-light p-3">
                    <h5 class="modal-title" id="exampleModalLabel">Generate Salary</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
                        id="close-modal"></button>
                </div>
                <form action="{{ route('generate-salary') }}" method="POST" class="tablelist-form"
                    autocomplete="off" id="generate-salary-form">
                    @csrf
                    <div class="modal-body">
                        <h5 class="modal-title">Do You Want to Generate Salary ?</h5>
                        <input type="hidden" name="staff_id" id="salary_employee_id">
                        {{-- <input type="hidden" name="month" id="salary_month"> --}}
                        <input type="hidden" name="start_date" id="salary_start_date">
                        <input type="hidden" name="end_date" id="salary_end_date">
                    </div>
                    <div class="modal-footer">
                        <div class="hstack gap-2 justify-content-end">
                            <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary" id="generate-salary-btn">Generate Salary</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
     {{-- Track Modal --}}
    <div class="modal fade" id="trackHistoryModal" tabindex="-1" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header bg-light p-3">
                    <h5 class="modal-title" id="exampleModalLabel">Salary History</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
                        id="close-modal"></button>
                </div>
                <div class="modal-body">
                    <div id="trackList">
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="hstack gap-2 justify-content-end">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script src="{{ URL::asset('/assets/libs/sweetalert2/sweetalert2.min.js') }}"></script>
    <script src="{{ URL::asset('/assets/js/app.min.js') }}"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.3.2/js/dataTables.buttons.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/buttons/2.3.2/js/buttons.html5.min.js" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.3.2/js/buttons.print.min.js" type="text/javascript"></script>

    <script>
        const salaryCycleIds = @json($salaryCycleIds);
        $(document).ready(function() {
            var dataTable = $('#fixed-header').DataTable({
                processing: true,
                serverSide: true,
                "scrollX": true,
                autoWidth: true,
                stateSave: true,
                ordering: false,
                pageLength: 10,
                lengthMenu: [
                    [10, 500, 1000, 5000],
                    [10, 500, 1000, 5000]
                ],
                dom: 'lBfrtip',

                buttons: [{
                    extend: 'excelHtml5',
                    exportOptions: {
                        columns: [1, 2, 3, 4]
                    }
                }, 'colvis'],
                ajax: {
                    url: '/admin/employees-salary',
                    type: 'GET',
                    data: function(d) {
                        // d.month = $("#month").val();
                        d.start_date = $("#start_date").val();
                        d.end_date = $("#end_date").val();
                    }
                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'name',
                        name: 'name',
                    },
                    {
                        data:'total_working_days',
                        name:'total_working_days',
                    },
                    {
                        data:'total_working_hours',
                        name:'total_working_hours',
                    },
                    {
                        data:'avg_working_hours',
                        name:'avg_working_hours',
                    },
                    {
                        data:'salary',
                        name:'salary',
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                ],

            });
    });

        $(document).on('click', '.generate-salary', function(e) {
            e.preventDefault();
            var id = $(this).data('id');
            $('#salary_employee_id').val(id);
            // $('#salary_month').val($('#month').val());
            $('#salary_start_date').val($('#start_date').val());
            $('#salary_end_date').val($('#end_date').val());
           $('#generateSalaryModal').modal('show');
        })

        $('#generate-salary-form').submit(function(e) {
            e.preventDefault();
            $('#generate-salary-btn').prop('disabled', true);
            var url = $(this).attr('action');
            var formData = new FormData(this);
            $.ajax({
                url: url,
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                success: function(response) {
                    if (response.status == 'success') {
                        $('#generate-salary-btn').prop('disabled', false);
                        $('#generateSalaryModal').modal('hide');
                        Swal.fire({
                            icon: 'success',
                            title: 'Success',
                            text: response.message,
                            showConfirmButton: false,
                            timer: 1500
                        })
                    } else {
                        $('#generate-salary-btn').prop('disabled', false);
                        const Toast = Swal.mixin({
                            toast: true,
                            position: 'top-end',
                            showConfirmButton: false,
                            timer: 3000,
                            timerProgressBar: true,
                        })

                        Toast.fire({
                            icon: 'error',
                            title: response.message
                        })
                    }
                }
            })
    })
    $('#filter').click(function(e) {
            e.preventDefault();
            $('#fixed-header').DataTable().ajax.reload();
        });
        $('#refresh').click(function(e) {
            e.preventDefault();
            const now = new Date();
            const month = now.toISOString().slice(0, 7);
            $('#month').val(month);
            $('#fixed-header').DataTable().ajax.reload();
        });

     $(document).on('click', '.history-btn', function(e) {
            e.preventDefault();
            var staff_id = $(this).data('id');
            if (staff_id != "") {
                $.ajax({
                    type: "POST",
                    url: "{{ route('get-salary-history') }}",
                    data: {
                        _token: "{{ csrf_token() }}",
                        "staff_id": staff_id
                    },
                    success: function(response) {
                        $("#trackList").html(response);
                    },
                    error: function(data) {
                        alert("Sorry, Something went wrong. Please try again.");
                    }
                });
                $("#trackHistoryModal").modal("show");
            } else {
                alert("Sorry, Something went wrong. Please try again.");
            }

        });

    </script>
@endsection