@extends('admin.layouts.app')

@push('styles')
    <!-- DataTables -->
    @include('datatable.css.data_table_css')
@endpush

@section('title')
    Advance Salary
@endsection

@section('container')
    <div class="row">
        @if (session('message'))
            <div class="alert alert-info">
                {{ session('message') }}
            </div>
        @endif
        @if (session('error'))
            <div class="alert alert-danger">
                {{ session('error') }}
            </div>
        @endif
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body table-responsive">
                    <table id="table" class="table table-bordered table-striped" style="width: 100% !important">
                        <thead>
                        <tr>
                            <th>Image</th>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Department</th>
                            <th>Designation</th>
                            <th>Type</th>
                            <th>Mobile</th>
                            <th>Action</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-advance-salary">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Advance Salary</h4>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <form id="modal-form" enctype="multipart/form-data" name="modal-form">
                        <div class="form-group row">
                            <label>Employee ID</label>
                            <input class="form-control" id="modal-employee-id" disabled>
                        </div>

                        <div class="form-group row">
                            <label>Name</label>
                            <input class="form-control" id="modal-name" disabled>
                        </div>

                        <input type="hidden" name="id" id="modal-id">

                        <div class="form-group row">
                            <label>Department</label>
                            <input class="form-control" id="modal-department" disabled>
                        </div>

                        <div class="form-group row">
                            <label>Designation</label>
                            <input class="form-control" id="modal-designation" disabled>
                        </div>
                        <div class="form-group row">
                            <label>Year</label>
                            <select class="form-control select2" name="year" id="year">
                                <option value="">Select Year</option>
                                @for($i=2024; $i <= date('Y'); $i++)
                                    <option value="{{ $i }}" {{ request()->get('year') == $i ? 'selected' : '' }}>{{ $i }}</option>
                                @endfor
                            </select>
                        </div>
                        <div class="form-group row">
                            <label>Advance Month</label>
                            <select class="form-control select2" name="month" id="month">
                                <option value="">Select Month</option>
                            </select>
                        </div>
                        <div class="form-group row">
                            <label>Advance Salary</label>
                            <input type="text" class="form-control" name="advance_salary" placeholder="Enter advance salary amount">
                        </div>
                        <div class="form-group row">
                            <label>Type</label>
                            <select class="form-control select2" name="type">
                                <option value="5">Advance</option>
                            </select>
                        </div>

                        <div class="form-group row">
                            <label>Date</label>
                            <div class="input-group date">
                                <div class="input-group-addon">
                                    <i class="fa fa-calendar"></i>
                                </div>
                                <input type="text" class="form-control pull-right" id="date" name="date" value="{{ date('Y-m-d') }}" autocomplete="off">
                            </div>
                            <!-- /.input group -->
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default pull-left" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="modal-btn-advance">Save</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
@endsection

@push('scripts')
    @include('datatable.js.data_table_js')
  <!-- sweet alert 2 -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>

    <script>
        $(function () {
            $('#table').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{{ route('payroll.advance_salary.datatable') }}',
                columns: [
                    {data: 'photo', name: 'photo', orderable: false},
                    {data: 'employee_id', name: 'employee_id'},
                    {data: 'name', name: 'name'},
                    {data: 'department', name: 'department.name'},
                    {data: 'designation', name: 'designation.name'},
                    {data: 'employee_type', name: 'employee_type'},
                    {data: 'mobile_no', name: 'mobile_no'},
                    {data: 'action', name: 'action', orderable: false},
                ],
                order: [[ 1, "asc" ]],
            });

            //Date picker
            // $('#date').datepicker({
            //     autoclose: true,
            //     format: 'yyyy-mm-dd'
            // });

            $('body').on('click', '.btn-update', function () {
                var employeeId = $(this).data('id');

                $.ajax({
                    method: "GET",
                    url: "{{ route('get_employee_details') }}",
                    data: { employeeId: employeeId }
                }).done(function( response ) {
                    console.log(response);
                    $('#modal-employee-id').val(response.employee_id);
                    $('#modal-name').val(response.name);
                    $('#modal-department').val(response.department.name);
                    $('#modal-designation').val(response.designation.name);
                    $('#modal-id').val(response.id);
                    $('#modal-basic-salary').val(response.basic_salary);
                    $('#modal-house-rent').val(response.house_rent);
                    $('#modal-travel').val(response.travel);
                    $('#modal-medical').val(response.medical);
                    $('#modal-tax').val(response.tax);
                    $('#modal-others-deduct').val(response.others_deduct);
                    $('#modal-gross-salary').val(response.gross_salary);

                    $('#modal-advance-salary').modal('show');
                });
            });

            $('#modal-btn-advance').click(function () {
                var formData = new FormData($('#modal-form')[0]);
                $.ajax({
                    type: "POST",
                    url: "{{ route('payroll.salary_advance_post') }}",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        if (response.success) {
                            $('#modal-advance-salary').modal('hide');
                            Swal.fire(
                                'Updated!',
                                response.message,
                                'success'
                            ).then((result) => {
                                location.reload();
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Oops...',
                                text: response.message,
                            });
                        }
                    }
                });
            });
            $('#year').change(function () {
                var year = $(this).val();
                $('#month').html('<option value="">Select Month</option>');

                if (year != '') {
                    $.ajax({
                        method: "GET",
                        url: "{{ route('get_month') }}",
                        data: { year: year }
                    }).done(function( response ) {
                        $.each(response, function( index, item ) {
                            $('#month').append('<option value="'+item.id+'">'+item.name+'</option>');
                        });
                    });
                }
            });
        })
    </script>
@endpush