@extends('layouts.app')
@section('title')
Cost Confirm
@endsection
@push('styles')
<link href="../assets/plugins/datatables.net-bs5/css/dataTables.bootstrap5.min.css" rel="stylesheet" />
<link href="../assets/plugins/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css" rel="stylesheet" />

<link href="../assets/custom.css">
@endpush

@section('content')
<!-- BEGIN page-header -->
<h1 class="page-header">Cost Confirm</h1>
<!-- END page-header -->

<!-- BEGIN panel -->
<div class="panel panel-inverse">
    <div class="panel-body">
        <a href="#addcostmodal" class="btn btn-primary mb-2" data-bs-toggle="modal">Add Cost</a>
        <div class="table-responsive">
            <table id="cost_confirm_table" class="table table-striped table-bordered align-middle nowrap w-100">
                <thead>
                    <tr>
                        <th></th>
                        <th>Type</th>
                        <th>Start date</th>
                        <th>End date</th>
                        <th>File</th>
                        <th>Status</th>
                        <th>Created At</th>
                        <th>Created By</th>
                        <th>Updated At</th>
                        <th>Updated By</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
                <tfoot>
                    <tr>
                        <th></th>
                        <th>Type</th>
                        <th>Start date</th>
                        <th>End date</th>
                        <th>File</th>
                        <th>Status</th>
                        <th>Created At</th>
                        <th>Created By</th>
                        <th>Updated At</th>
                        <th>Updated By</th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>
<!-- END panel -->

@include('modals.cost')
@endsection

@push('scripts')
<script src="../assets/plugins/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="../assets/plugins/datatables.net-bs5/js/dataTables.bootstrap5.min.js"></script>
<script src="../assets/plugins/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
<script src="../assets/plugins/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js"></script>

<script>
$('#cost_confirm_table tfoot th').each( function (index,element) {
    var title = $(this).text();

    if(index ==  0 || index ==  1 || index ==  5){}
    else{
        $(this).html( '<input class="form-control" style="min-width:150px;" type="text" placeholder="Search '+title+'" />' );
    }
} );
$('#cost_confirm_table').DataTable({
        pageLength: 10,
        lengthMenu: [5, 10, 20, 50],
        order: [[ 6, "desc" ]],
        search: {
            return: true,
        },
        columns: [
            {data:'id',name:'costconfirm.id',className:'text-center',
                render: function ( data, type, row, meta ) {

                    var html = "";
                    if(row.status == 0){
                        @can('costapprove')
                        html += `<a href="javascript:void(0)" onclick="approve(`+data+`);" class="btn btn-primary btn-sm "><i class="fa fa-check"></i> Approve</a>`;
                        @endcan
                        @can('costreject')
                        html += `<a href="javascript:void(0)" onclick="reject(`+data+`);" class="btn btn-danger btn-sm "><i class="fa fa-times"></i> Reject</a>`;
                        @endcan
                        @can('costdelete')
                        html +=`<a href="javascript:void(0)" onclick="deleted(`+data+`);" class="btn btn-danger btn-sm "><i class="fa fa-times"></i> Delete</a>`;
                        @endcan
                    }

                    return html;

                },searchable: false,orderable:false
            },
            {data:'type',name:'costconfirm.type',render:function(data,type,row,meta){
                if(type == 'display'){
                    if(data == 1){
                        return 'Statement';
                    }else if(data ==2){
                        return 'Direct Mail';
                    }
                }
                return data;
            },searchable: true,orderable:true},
            {data:'startdate',name:'costconfirm.startdate',searchable: true,orderable:true},
            {data:'enddate',name:'costconfirm.enddate',searchable: true,orderable:true},
            {data:'file',name:'costconfirm.file',
                render: function ( data, type, row, meta ) {

                    return `<a href="storage/`+data+`" target="_blank" download>Download</a>`;
                },searchable: false,orderable:false
            },
            {data:'status',name:'costconfirm.status',
                render: function(data,type,row,meta){
                    var html = '';
                    if(row.status == 0){
                        html = `<span class="badge bg-warning">Waiting</span>`
                    }
                    else if(row.status == 1){
                        html = `<span class="badge bg-primary">Approve</span>`
                    }
                    else if(row.status == 2){
                        html = `<span class="badge bg-danger">Reject</span>`
                    }
                    return html;
                },searchable: true,orderable:true
            },
            {data:'created_at',name:'costconfirm.created_at',searchable: true,orderable:true},
            {data:'createduser',name:'cre.username as createduser',searchable: true,orderable:true},
            {data:'updated_at',name:'costconfirm.updated_at',searchable: true,orderable:true},
            {data:'updateduser',name:'upd.username',searchable: true,orderable:true},

        ],
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{route('costconfirmdatatable')}}",
            type: 'post',
            data: function (d) {

            },
        },
        initComplete: function () {
                this.api().columns([1]).every( function ()
                {
                    var column = this;
                    var select = $('<select class="form-select" style="min-width:150px;"><option value="">Search '+column.header().textContent+'</option></select>')
                        .appendTo( $(column.footer()).empty() )
                        .on( 'change', function () {
                            var val = $.fn.dataTable.util.escapeRegex($(this).val());

                            column.search( val ? val: '', true, false ).draw();

                        });

                        select.append( '<option value="1">Statement</option><option value="2">Direct Mail</option>' );

                });
                this.api().columns([5]).every( function ()
                {
                    var column = this;
                    var select = $('<select class="form-select" style="min-width:150px;"><option value="">Search '+column.header().textContent+'</option></select>')
                        .appendTo( $(column.footer()).empty() )
                        .on( 'change', function () {
                            var val = $.fn.dataTable.util.escapeRegex($(this).val());

                            column.search( val ? val: '', true, false ).draw();

                        });

                        select.append( `
                        <option value="0">Waiting</option>
                        <option value="1">Approve</option>
                        <option value="2">Reject</option>
                        ` );

                });

                this.api()
                .columns([1,2,3,4,6,7,8,9])
                .every(function () {
                    var that = this;

                    $('input', this.footer()).on('keypress', function (e) {
                        if (that.search() !== this.value && e.key === "Enter") {
                            that.search(this.value).draw();
                        }
                    });
                });

        },
});




function approve(id){
            Swal.fire({
                        title: 'Are you Sure?',
                        text: 'Approve this cost.',
                        icon: 'warning',
                        showCancelButton: true,
                        cancelButtonColor: '#d33',
                        confirmButtonColor: '#3085d6',
                        confirmButtonText: 'Approve',
                        reverseButtons:true,
                        }).then((result) => {
                            if (result.value) {
                                Swal.fire({
                                    title: 'Please Wait..!',
                                    text: 'Is working..',
                                    allowOutsideClick: false,
                                    allowEscapeKey: false,
                                    allowEnterKey: false,
                                    didOpen: () => {
                                        swal.showLoading()
                                    }
                                })
                                $.ajaxSetup({
                                    headers: {
                                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                    }
                                });
                                $.ajax({
                                    url:"{{route('approvecost')}}",
                                    method:"POST",
                                    data:{'id':id},
                                    beforeSend:function(){

                                    },
                                    success:function(data){
                                        Swal.fire({
                                        title: 'Success!!',
                                        text: 'Press OK to continuous.',
                                        icon: 'success',
                                        showCancelButton: false,
                                        confirmButtonColor: '#3085d6',
                                        confirmButtonText: 'OK'
                                        }).then((result) => {
                                            if (result.value) {
                                                $('#cost_confirm_table').DataTable().ajax.reload(null,false);
                                            }
                                        })
                                    },
                                    error:function(response){
                                        Swal.fire(
                                            'Error!!',
                                            'Contract Admin',
                                            'error'
                                            )
                                    }
                                });
                            }
                        })

}

function reject(id){
            Swal.fire({
                        title: 'Are you Sure?',
                        text: 'Reject this cost.',
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#d33',
                        confirmButtonText: 'Reject',
                        reverseButtons:true,
                        }).then((result) => {
                            if (result.value) {
                                Swal.fire({
                                    title: 'Please Wait..!',
                                    text: 'Is working..',
                                    allowOutsideClick: false,
                                    allowEscapeKey: false,
                                    allowEnterKey: false,
                                    didOpen: () => {
                                        swal.showLoading()
                                    }
                                })
                                $.ajaxSetup({
                                    headers: {
                                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                    }
                                });
                                $.ajax({
                                    url:"{{route('rejectcost')}}",
                                    method:"POST",
                                    data:{'id':id},
                                    beforeSend:function(){

                                    },
                                    success:function(data){
                                        Swal.fire({
                                        title: 'Success!!',
                                        text: 'Press OK to continuous.',
                                        icon: 'success',
                                        showCancelButton: false,
                                        confirmButtonColor: '#3085d6',
                                        confirmButtonText: 'OK'
                                        }).then((result) => {
                                            if (result.value) {
                                                $('#cost_confirm_table').DataTable().ajax.reload(null,false);
                                            }
                                        })
                                    },
                                    error:function(response){
                                        Swal.fire(
                                            'Error!!',
                                            'Contract Admin',
                                            'error'
                                            )
                                    }
                                });
                            }
                        })

}

function deleted(id){
            Swal.fire({
                        title: 'Are you Sure?',
                        text: 'Delete this cost.',
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#d33',
                        confirmButtonText: 'Delete',
                        reverseButtons:true,
                        }).then((result) => {
                            if (result.value) {
                                Swal.fire({
                                    title: 'Please Wait..!',
                                    text: 'Is working..',
                                    allowOutsideClick: false,
                                    allowEscapeKey: false,
                                    allowEnterKey: false,
                                    didOpen: () => {
                                        swal.showLoading()
                                    }
                                })
                                $.ajaxSetup({
                                    headers: {
                                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                    }
                                });
                                $.ajax({
                                    url:"{{route('deletecost')}}",
                                    method:"POST",
                                    data:{'id':id},
                                    beforeSend:function(){

                                    },
                                    success:function(data){
                                        Swal.fire({
                                        title: 'Success!!',
                                        text: 'Press OK to continuous.',
                                        icon: 'success',
                                        showCancelButton: false,
                                        confirmButtonColor: '#3085d6',
                                        confirmButtonText: 'OK'
                                        }).then((result) => {
                                            if (result.value) {
                                                $('#cost_confirm_table').DataTable().ajax.reload(null,false);
                                            }
                                        })
                                    },
                                    error:function(response){
                                        Swal.fire(
                                            'Error!!',
                                            'Contract Admin',
                                            'error'
                                            )
                                    }
                                });
                            }
                        })

}
</script>
@endpush