@extends('adminlte::page')

@php
    $title = 'Pengajuan';
    $this_helper = 'pengajuan.';
@endphp

@section('title', 'Dashboard')

@section('content_header')
    <h1>{{$title}}</h1>
@stop

@section('content')
    @include('dashboard.'.$this_helper .'form')

    <div class="card">
        <div class="card-header">
            {{$title}} List

            <div class="float-right">
                <button class="btn btn-sm btn-success" id="btn-add-new">
                    <i class="fas fa-plus"></i>
                    Add {{$title}}
                </button>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-striped table-hover" id="table-list">
                    <thead>
                        <th>#</th>
                        <th>#</th>
                        <th>Code</th>
                        <th>Supplier</th>
                        <th>Barang</th>
                        <th>Quantity</th>
                        <th>Price</th>
                        <th>Status</th>
                        <th>Created By</th>
                        <th>Description</th>
                        <th>Option</th>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
@stop

@section('plugins.Datatables', true)

@section('css')
    <link rel="stylesheet" href="{{asset('css/admin_custom.css')}}">
@stop

@section('js')
    <script src="{{asset('js/alert.js')}}"></script>
    <script src="{{asset('js/helper.js')}}"></script>
    <script src="{{asset('js/crud-helper.js')}}"></script>
    <script> console.log('Hi!'); </script>
    <script>
        // Load Table
        var data_columns = [
            {
                data: 'DT_RowIndex',
                name: 'DT_RowIndex',
                orderable: false,
                searchable: false,
            },
            {
                data: 'created_at',
                name: 'created_at',
                "visible": false,
            },
            {
                data: 'code',
                name: 'code'
            },
            {
                data: 'supplier.name',
                name: 'supplier.name',
                'defaultContent': '-',
            },
            {
                data: 'barang.name',
                name: 'barang.name',
                'defaultContent': '-',
            },
            {
                data: 'quantity',
                name: 'quantity'
            },
            {
                data: 'price',
                name: 'price',
                render: $.fn.dataTable.render.number( '.', '.', 0, 'Rp ' ),
            },
            {
                data: 'status',
                name: 'status'
            },
            {
                data: 'creator.name',
                name: 'creator.name',
                'defaultContent': '-',
            },
            {
                data: 'desc',
                name: 'desc'
            },
            {
                data: 'action',
                name: 'action'
            },
        ];
        let url_table = `{{route($this_helper .'data')}}`;
        loadTable('#table-list',url_table,data_columns);

        // Edit Function
        let url_edit = "{{route($this_helper .'edit')}}/";
        $('body').on('click','.btn-edit',function (e) {
            e.preventDefault();
            let id = $(this).attr('data-id');
            loadEdit('#input-form',url_edit+id,dataEditButton)
        });

        function dataEditButton(response) {
            $('#barang_id').val(response.barang_id);
            $('#suplier_id').val(response.suplier_id);
            $('#quantity').val(response.quantity);
            $('#price').val(response.price);
            $('#date').val(moment(response.date).format("YYYY-MM-DD"));
            $('#desc').val(response.desc);
            $('#id').val(response.id);
        }

        // Delete Function
        let url_delete = "{{route($this_helper .'delete')}}/";
        $('body').on('click','.btn-delete', function (e) {
            e.preventDefault();
            let id = $(this).attr('data-id');
            loadDelete('#table-list',url_delete+id)
        });

        // Acc button
        $('body').on('click','.btn-acc',function (e) {
            e.preventDefault();
            let id = $(this).attr('data-id');
            Swal.fire({
                title: "Are you sure?",
                text: "You won't be able to revert this!",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#3085d6",
                cancelButtonColor: "#d33",
                confirmButtonText: "Yes, Accept it!",
            }).then((result) => {
                if (result.value == true) {
                    $.ajax({
                        type: "GET",
                        url: `{{route('pengajuan.acc')}}/`+id,
                        dataType: "JSON",
                        success: function (response) {
                            $('#table-list').DataTable().ajax.reload();
                            swal("success", 'success to accept pengajuan');
                        },
                        error: function (err) {
                            console.log(err);
                            swal("error");
                        },
                    });
                }
            });
        });
    </script>
@stop