@extends('hr_main')
@section('title', '| '.$data['pageTitle'])
@section('content')

<style>
    label {
        color: black;
        text-shadow: 0px 3px 4px rgb(0 0 0 / 30%);
        margin-bottom: 7px;
    }
    #fillDateFrom,
    #fillDateTo{
        height: 37px;
    }
    .col-xs-1,
    .col-xs-2 {
        padding-right: 0px !important;
    }

    #submit {
        background: #34495e;
        color: #fff;
        margin-top: 7px; 
        height: 37px; 
        border-radius: 2px;
        border: none; 
        cursor: pointer; 
        transition: all 0.3s ease; 
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    #submit:hover {
        background: #2c3e50; 
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); 
    }

    #submit:active {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); 
        transform: translateY(2px);
    }

    table.dataTable.no-footer {
        border-bottom: 1px solid #eee !important;
    }


    /* Style the pagination */
    #datatable_paginate {
        display: flex;
        justify-content: center;
        padding-top: 0.755em;
    }

    #datatable_paginate .paginate_button {
        color: #0d6efd;
        text-decoration: none;
        border: 1px solid #dee2e6;
        background-color: #fff;
        cursor: pointer;
    }

    #datatable_paginate .paginate_button.current {
        background: #0d6efd;
        color: #fff !important;
        border: 1px solid #0d6efd;
    }

    #datatable_paginate .paginate_button.disabled {
        color: #6c757d;
        background-color: #e9ecef;
        border: 1px solid #dee2e6;
        cursor: not-allowed;
        pointer-events: none;
    }

    #datatable_paginate .paginate_button:hover {
        background: #0d6dfdd6;
        border: 1px solid #0d6dfdd6;
        color: #fff !important;
    }

</style>

    <div class="row">
        <div class="col-md-12">
            <div class="viewTitle" style="border-bottom: 1px solid white;"></div>
        </div>
        <div class="col-md-12">
            <div class="panel panel-default panel-border">
                <div class="panel-heading" style="padding-bottom:0px">
                    <div class="panel-title">
                        {!! $data['pageTitle'] !!}
                    </div>

                    <div class="panel-options pull-right">
                        <a href="{{ url($data['addUrl']) }}" class="btn btn-white btn-icon">Add New</a>
                        {{-- <a href="{{ url($data['resetUrl']) }}" class="btn btn-white btn-icon"><i class="fa fa-refresh"></i></a> --}}
                    </div>
                </div>

                <div class="panel-body panelBodyView">

                    @php

                        $searchElements =[
                            ['element' => 'branchId', 'col' => 2, 'name' => 'branchId', 'attributes' => ['print_order' => '1']],
                            ['element' => 'employeeId', 'col' => 2, 'options' =>  ['' => 'All'], 'label' => 'Employee Name/ID', 'attributes' => ['print_order' => '2']],
                            ['element' => 'dateFrom', 'col' => 2, 'label' => 'Start Date', 'attributes' => ['print_order' => '3']],
                            ['element' => 'dateTo', 'col' => 2, 'label' => 'End Date', 'attributes' => ['print_order' => '4']],
                        ]
                    @endphp

                    @include('partials.searchPanel.main', ['searchElements' => $searchElements,'buttonLevel' => 'Search',])

                    <table class="table table-striped table-bordered table-condensed first-col-dark" id="datatable">
                        <thead>
                            <tr>
                                <th width="50">SL#</th>
                                <th>Employee Name</th>
                                <th>Employee Id</th>
                                <th>Branch</th>
                                <th>Transaction Date</th>
                                <th>Withdraw Amount</th>
                                <th width="50">Action</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('footerAssets')
<script>

    $(document).ready(function(){
        $('#fillBranchId').select2();
        $('#filEmployeeId').select2();

        var dataTable = $('#datatable').DataTable({
            "sDom": "ltipr", // For removing default Search bar //
            "processing": true,
            "serverSide": true,
            "ordering": false,
            "language": 
            {
                "processing": $('#loadingModal').show(),
            },
            "pageLength": 50,
            "ajax": 
            {
                "url": "{{ Request::url() }}",
                "type": "POST",
                "data": function(d)
                {
                    var inputs = {};
                    $.each($('form').serializeArray(), function() 
                    {
                        inputs[this.name] = this.value;
                    });
                    d._token = "{{ csrf_token() }}";
                    d.filter = inputs;
                }
            },
            "columns": [
                {
                    "data": "sl"
                },
                {
                    "className": 'dt-body-left',
                    "data": "employee_name"
                },
                {
                    "className": 'dt-body-center',
                    "data": "employee_id"
                },
                {
                    "className": 'dt-body-left',
                    "data": "employee_branch"
                },
                {   
                    "className": 'dt-body-center',
                    "data": "transaction_date"
                },
	            {
                    "className": 'dt-body-right',
                    "data": "withraw_amount"
                },
                {   
                    "className": 'dt-body-center',
                    "data": "actionButtons"
                },
            ]
        });

        $("#searchForm").submit(function(e){
            e.preventDefault();
            dataTable.draw();
        });

        $('#fillBranchId').change(function() {
            var branch_id = $(this).val();
            $("#filEmployeeId").select2("val", "");
            $("#filEmployeeId option").remove();

            if(branch_id) {
                $.ajax({
                    url: "{{ route('wf-withdraw-get-active-employees') }}",
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        "branch_id": branch_id,
                        "_token": $('meta[name="_token"]').attr('content')
                    },
                    success: function(__response) {
                        if(__response) {
                            $("#filEmployeeId").append("<option value=''>Select Employee</option>");
                            $("#filEmployeeId").select2("val", "");

                            $.each(__response, function(id, name) {
                                $("#filEmployeeId").append("<option value='" + id + "'>" + name + "</option>");
                            });
                        }
                        else {
                            alert("something went wrong");
                        }
                    },
                    error: function(jqXhr, textStatus, errorThrown) {
                        alert('Something went wrong');
                    }
                });
            } else {
                $("#filEmployeeId").append("<option value=''>All</option>");
                $("#filEmployeeId").select2("val", "");
            }
        });

    });

    function deleteRecord(id) {
        var val = confirm('Are you sure want to delete?');
        if(val == true) {
            $.ajax({
                url: '../wf-withdraw/delete',
                type: 'POST',
                dataType: 'json',
                data: {
                    "id": id,
                    "_token": $('meta[name="_token"]').attr('content')
                },
                success: function(__response) {
                    if(__response.status == true) {
                        toastr.success(__response.message);                        
                        setTimeout(function(){ location.reload(); }, 1000);
                    }
                    else if(__response.status == false) {
                        toastr.error(__response.message);     
                        setTimeout(function(){ location.reload(); }, 1000);          
                    }
                    else {
                        alert("something went wrong");
                    }
                },
                error: function(jqXhr, textStatus, errorThrown) {
                    alert('Something went wrong');
                }
            });
        }
    }

</script>
@endsection