@extends('admins.layouts.main')
@section('tool')
@endsection
@section('content')

    <div class="panel panel-bordered">
        <form id="From" method="get" class="form-horizontal" enctype="multipart/form-data">
            <div class="alert-light alert-dismissible alert-check">
                <div class="row">
                    <div class="p-4 pl-4 col-md-6 col-xl-6 form-title-right">
                        <div class="form-group row">
                            <label class="col-lg-4 col-form-label">關鍵字：</label>
                            <div class="col-md-8 ">
                                <input type="text" class="form-control" id="keyword" name="keyword"
                                       placeholder="名稱、連絡電話或網址" autocomplete="off" value="{{ $request['keyword'] }}">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-md-4 col-form-label"></label>
                            <div class="col-md-8" style="text-align: right">
                                <button type="button" onclick="resetUrl()" class="btn btn-warning">重設</button>
                                <button type="submit" class="btn btn-primary" value="">搜尋</button>
                            </div>
                        </div>
                    </div>
                    <div class="p-4 pl-4 col-md-6 col-xl-6 form-title-right">

                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="panel">
        <div class="panel-body">
            <h3 class="panel-title">{{ $title }}</h3>
            <div class="col-lg-6 p-4">
                @can('create', App\Models\Supplier::class)
                <a href="{{ $urls['create'] }}" class="btn btn-primary"><i class="icon md-plus" aria-hidden="true"></i>新增廠牌</a>
                @endcan
            </div>
            <div class="example table-responsive">
                <table class="table table-hover dataTable table-striped w-full jsgrid">
                    <thead>
                    <tr>
                        <th>編輯</th>
                        <th>id</th>
                        <th>名稱</th>
                        <th>連絡電話</th>
                        <th>網址</th>
                        <th>新增日期</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($suppliers as $supplier)
                        <tr>
                            <td>
                                @can('edit', App\Models\Supplier::class)
                                    <a href="{{  $supplier->urls['edit'] }}" class="btn btn-success"><i class="icon md-edit" aria-hidden="true"></i>編輯</a>
                                @endcan
                                @can('show', App\Models\Supplier::class)
                                    <a href="{{  $supplier->urls['show'] }}" class="btn btn-dark"><i class="icon md-eye" aria-hidden="true"></i>查看</a>
                                @endcan
                                @can('delete', App\Models\Supplier::class)
                                    @if($supplier->aed->isEmpty())
                                        <button data-url="{{  $supplier->urls['delete'] }}" class="btn btn-danger delete_button"><i class="icon md-delete" aria-hidden="true"></i>刪除</button>
                                    @endif
                                @endcan
                            </td>
                            <td class="text-middle">{{ $supplier->id }}</td>
                            <td class="text-middle">{{ $supplier->name }}</td>
                            <td class="text-middle">{{ $supplier->phone_number }}</td>
                            <td class="text-middle">{{ $supplier->url }}</td>
                            <td class="text-middle">{{ $supplier->created_at }}</td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script>
        var dtParams = {
            "searching": false, // 顯示搜尋
            "ordering": false, // 顯示搜尋
            "bPaginate": true, // 顯示搜尋
            "info":	true, // 顯示資訊
            "pageLength": 10,
            autoFill: {
                horizontal: true
            },
            language: {
                "sInfo": "顯示第 _START_ 至 _END_ 項結果，共 _TOTAL_ 項",
                "sInfoEmpty": "顯示第 0 至 0 項結果，共 0 項",
                "search": "搜尋:",
                "lengthMenu": "每頁顯示 _MENU_ 筆",
                "zeroRecords": "沒有資料",
                paginate: {
                    first:    '«',
                    previous: '‹',
                    next:     '›',
                    last:     '»'
                },
                aria: {
                    paginate: {
                        first:    'First',
                        previous: 'Previous',
                        next:     'Next',
                        last:     'Last'
                    }
                }
            }
        };

        $(document).ready(function () {
            $(".table").DataTable(dtParams);

            $('body').on('click', '.delete_button', function(){

                if(confirm('確定要刪除廠牌資料?') === false){
                    return false;
                }

                let parameters = {
                    _method:'delete'
                }

                showLoading();
                $.post($(this).data('url'), parameters, function(response){
                    hideLoading();

                    if(response.status){
                        notie.alert({type: 'success', text: response.message, time: 2});
                        var mySubmitForm = document.createElement("FORM");
mySubmitForm.setAttribute("id", "mySubmitForm");
mySubmitForm.setAttribute("action", response.url);
document.body.appendChild(mySubmitForm);
mySubmitForm.submit();;
                        return false;
                    }

                    notie.alert({type: 'error', text: response.message, time: 2});

                }, 'json');

                return false;
            });
        });
    </script>
@endsection