@extends('layouts.app')
@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">


<!-- PAGE-HEADER -->
<div class="page-header">
    <div>
        <h1>My Reimbursement Requests <small>List</small></h1>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">Dashboard</li>
        </ol>
    </div>

    <div class="float-end">
        <button type="button" class="modal-effect btn btn-primary d-grid mb-3" data-bs-effect="effect-scale"
            data-bs-toggle="modal" id="createNewTemplate" data-bs-target="#ajaxModel"> Add Request</button>
    </div>
</div>
<div class="content mt-3">
    <!-- Default box -->
    <div class="card">

        <div class="card-body">
            <table class="table table-bordered table-hover data-table" width="100%">
                <thead>
                    <tr>
                        <th>Sr.</th>
                        <th>Employee Name</th>
                        <th>Site Name</th>
                        <th>Expense type</th>
                        <th>Amount</th>
                        <th>Date Of Expense</th>
                        <th>Status</th>
                        <th>Last Modified</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>

@include('view-modals/reimbursement_addedit')

@stop


@section('scripting')

<script type="text/javascript">
    $(document).ready(function() {

        $(".standardSelect").selectpicker();

        $('.standardSelect').on('change', function() {
            $(this).valid();
            $('.standardSelect').selectpicker('refresh');
        });

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        var table = $('.data-table').DataTable({
            processing: true,
            serverSide: true,
            scrollX:true,
            ajax: "{{ url('getReimbursementData') }}",
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex'
                },
                {
                    data: 'user_id',
                    name: 'employee_name'
                },
                
                {
                    data: 'site_name',
                    name: 'site_name'
                },
                {
                    data: 'category',
                    name: 'expense_type',
                    render: function(data, type, row) {
                        try {
                            let categories = Array.isArray(data) ? data : JSON.parse(data);
                            return categories.join(', ');
                        } catch (e) {
                            return data; 
                        }
                    }
                },
                {
                    data: 'amount',
                    name: 'amount'
                },
                {
                    data: 'date_of_expense',
                    name: 'date_of_expense'
                },
                {
                    data: 'status',
                    name: 'status',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'updated_at',
                    name: 'updated_at',
                    orderable: false,
                    searchable: false
                },
            ],
            language: {
                search: "_INPUT_",
                searchPlaceholder: "Search records",
            }
        });

        $('#createNewTemplate').click(function() {
            reset_modal();
            $('#saveBtn').val("Create");
            $('#status').val('').trigger("chosen:updated");
            $('#dataForm').trigger("reset");
            $('#modelHeading').html("Create New Request");
            $('#ajaxModel').modal('show');
        });



        $('#saveBtn').click(function(e) {
            e.preventDefault();

            var form = $('#dataForm')[0];
            var formData = new FormData(form);

            $.ajax({
                url: "{{ url('reimbursement_req/store') }}",
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,

                success: function(data) {
                    $('#dataForm').trigger("reset");
                    $('#ajaxModel').modal('hide');
                    $('.data-table').DataTable().ajax.reload();
                    swal({
                        title: "Success!",
                        text: data.msg,
                        icon: "success",
                    });
                },
                error: function(data) {
                    if (data.status == 422) {
                        var x = data.responseJSON;
                        $.each(x.errors, function(index, value) {
                            $("#" + index).addClass("is-invalid");
                            $("#" + index + "-error").html(value[0]);
                        });
                    }
                    $('#saveBtn').html('Save Changes');
                }
            });
        });



        $('.standardSelect').selectpicker('refresh');

        //$(".standardSelect").select2();

    });


    function reset_modal() {
    $("#reimbursement_id").val("");
    $("#site_id").val("").trigger('change');
    $("#category").val([]).trigger('change');
    $("#payment_method").val("").trigger('change');
    $("#amount").val("");
    $("#description").val("");
    $("#date_of_expense").val("");
    $("#receipt_attachment").val("");
    $("#site_id").removeClass("is-invalid");
    $("#category").removeClass("is-invalid");
    $("#payment_method").removeClass("is-invalid");
    $("#amount").removeClass("is-invalid");
    $("#description").removeClass("is-invalid");
    $("#date_of_expense").removeClass("is-invalid");
    $("#receipt_attachment").removeClass("is-invalid");
    $("#site_id-error").html("");
    $("#category-error").html("");
    $("#payment_method-error").html("");
    $("#amount-error").html("");
    $("#description-error").html("");
    $("#date_of_expense-error").html("");
    $("#receipt_attachment-error").html("");
    $('#saveBtn').html('Save Changes');
}

</script>
@stop