@extends('hr_main')
@section('title', '| ' . $data['pageTitle'])
@section('content')
<style>
    .panel {
        margin-bottom: 80px;
    }
    .panel .panel-heading {
        border-bottom: 1px solid #ddd;
        padding-bottom: 9px
    }
    .panel.panel-border {
        border: 0;
    }
    .first-col-dark thead > tr > th {
        background-color: #708090 !important;
    }
    .first-col-dark tbody > tr > td:first-child {
        background-color: #708090 !important;
    }
    .btn-icon {
        display: flex !important;
        align-items: center;
        padding: 6px 10px !important;
    }
    .btn.btn-icon i {
        padding: 4px 4px 3px 0px !important;
    }
    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;
        padding: 0.3em .6em;
    }

    #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;
    }
    .dataTables_wrapper .dataTables_processing {
        font-size: 0 !important;
        background: none !important;
    }
    .dataTables_processing:before {
        content: '';
        display: block;
        height: 30px;
        width: 30px;
        -webkit-animation: spin .5s infinite linear;
        animation: spin .5s infinite linear;
        border: 4px solid #ddd;
        border-left-color: #0d6dfdd6;
        border-radius: 100%; 
        margin: 0 auto;
    }
    @-webkit-keyframes spin {
        to {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg); 
        }
    }
    @keyframes spin {
        to {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg); 
        } 
    }
    footer.main-footer {
        position: absolute;
        bottom: 0;
        width: 100%;
    }
    footer.main-footer .footer-inner {
        display: flex;
        justify-content: center;
    }
    footer.main-footer .footer-text p {
        margin: 0;
    }
    footer.main-footer .go-up a {
        padding: 0px 5px;
    }

</style>

{{-- <div class="row">
    <div class="col-md-12">
        <div class="" style="">
            <div class="">
                <div class="panel panel-default" style="background-color:#708090;">
                    <div class="panel-heading" style="padding-bottom:0px">
                        <div class="panel-title">
                            <h2>{!! $data['pageTitle'] !!}</h2>
                        </div>

                        <div class="panel-options">
							<a href="{!! $data['addBtnUrl'] !!}" class="btn btn-info pull-right addViewBtn">
                                <i class="glyphicon glyphicon-plus-sign addIcon"></i>Add New
                            </a>
						</div>
                    </div>

                    <div class="panel-body panelBodyView">
                        <table class="table table-striped table-bordered table-condensed first-col-dark" id="datatable">
                            <thead>
                                <tr>
                                    <th style="width:2%;">SL#</th>
                                    <th style="width:10%">Letter Type</th>
                                    <th style="width:10%">Effect Date</th>
                                    <th style="width:2%">Action</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>

            </div>

        </div>

    </div>
</div> --}}

<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['addBtnUrl']) }}" class="btn btn-white btn-icon"><i class="glyphicon glyphicon-plus-sign addIcon"></i>Add New</a>
                </div>
            </div>

            <div class="panel-body panelBodyView">
                <table class="table table-striped table-bordered table-condensed first-col-dark" id="datatable">
                    <thead>
                        <tr>
                            <th style="width:2%;">SL#</th>
                            <th style="width:10%">Letter Type</th>
                            <th style="width:10%">Effect Date</th>
                            <th style="width:2%">Action</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>

<script>

    $(document).ready(function() 
    {
        var dataTable = $('#datatable').DataTable({
            "sDom": "ltipr", // For removing default Search bar //
            "processing": true,
            "serverSide": true,
            "ordering": false,
            "language": 
            {
                "processing": $('#loadingModal').show(),
            },
            "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-center',
                    "data": "letter_type"
                },
                {   
                    "className": 'dt-body-center',
                    "data": "effect_date"
                },
                {   
                    "className": 'text-center',
                    "data": "id"
                }
            ],

            "columnDefs": [
            {
                "targets": -1,
                "data": "id",
                "render": function(data, type, row) 
                {   
                    disabled = '';
                    if(row.letter_format_config_id != null) disabled = 'disabled';

                    var viewIcon = '<a href="view/'+ data + '" class="btn btn-xs btn-info"><i class="fa fa-eye" aria-hidden="true"></i></a>';
                    // var editIcon = '<a href="edit/' + data + '" class="btn btn-xs btn-info" ' + disabled + '><i class="fa fa-pencil" aria-hidden="true"></i></a>';
                    // var deleteIcon = '<a href="#" class="btn btn-xs btn-danger" ' + disabled +  ' onclick="deleteRecord('+ data +')"><i class="fa fa-trash"></i></a>';

                    var viewIcon = '<a href="view/' + data + '" class="btn btn-xs btn-info"><i class="fa fa-eye" aria-hidden="true"></i></a>';
                    var editIcon = '';
                    var deleteIcon = '';

                    if (row.letter_format_config_id == null) {
                        if(row.is_latest){
                            editIcon = '<a href="edit/' + data + '" class="btn btn-xs btn-success"><i class="fa fa-pencil" aria-hidden="true"></i></a>';
                            deleteIcon = '<a href="#" class="btn btn-xs btn-danger" onclick="deleteRecord(' + data + ')"><i class="fa fa-trash"></i></a>';
                        }
                    }
                    return (viewIcon + editIcon + deleteIcon);
                }
            }]
        });

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

    function deleteRecord(id) {
        var val = confirm('Are you sure want to delete?');

        if(val == true) {
            $.ajax({
                url: '../orgLetterTypeWiseAttributeConfig/delete',
                type: 'POST',
                dataType: 'json',
                data: {
                    "modelId": id,
                    "_token": $('meta[name="_token"]').attr('content')
                },
                success: function(__response) {   
                    if(__response.status == true) {
                        toastr.success(__response.message);                        
                        setTimeout(function(){ location.reload(); }, 600);
                    }
                    else if(__response.status == false) {
                        toastr.error(__response.message);
                        setTimeout(function(){ location.reload(); }, 1500);          
                    }
                    else {
                        alert("something went wrong");
                    }
                },
                error: function(jqXhr, textStatus, errorThrown) {
                    alert('Something went wrong');
                }
            });
        }
    }
</script>
@endsection