@extends('dashboard.layouts.index')
@section('page_title')
@lang('global.drivers')
@stop

@section('breadcrumb')

<div class="breadcrumb-item">
    @lang('global.drivers')
</div>
@stop

@if ($errors->any())
@foreach ($errors->all() as $error)
<div>{{$error}}</div>
@endforeach
@endif

@if ($errors->any())
@foreach ($errors->all() as $error)
<div class="alert alert-danger fade in fadeAlert" data-alert="alert">
    <a class="close" data-dismiss="alert" href="#">&times;</a>
    {{ $error }}
</div>
@endforeach
@endif

@section('content')

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h4></h4>
                <div class="card-header-action">
                    <a href="{{route('dashboard.users.driver.create')}}" id="btn-create" class="btn btn-primary">
                        <i class="fa fa-plus"></i>
                        @lang('global.create')
                    </a>
                </div>
            </div>
            @if(session()->has('error'))
            <div class="alert alert-danger" data-alert="alert">
                <a class="close" data-dismiss="alert" href="#">&times;</a>
                {{ session()->get('error') }}
            </div>
            @endif

            <div class="card-body p-4">
                <div class="table-responsive">
                    <table class="table table-striped" id="table-user">
                        <thead>
                            <tr>
                                <th class="text-center">
                                    <i class="fas fa-th"></i>
                                </th>
                                <th>@lang("global.image")</th>
                                <th>@lang("global.email")</th>
                                <th>@lang("global.phone")</th>
                                <th>@lang("global.status")</th>
                                <th>@lang("global.approve")</th>
                                <th>@lang("global.is_blocked")</th>
                                <th>@lang("global.created_at")</th>
                                <th>@lang("global.action")</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@stop
@push('js')
<script>
    $(function () {
    var table = $("#table-user").DataTable({
        oLanguage: {
            "sSearch": "@lang('global.search')",
            "sLengthMenu": "@lang('global.show') _MENU_ @lang('global.record')",
            "sZeroRecords": "@lang('global.zero_records')",
            "sInfo": "@lang('global.showing')  _START_ @lang('global.to') _END_ @lang('global.of') _TOTAL_ @lang('global.entries')",
            'sInfoEmpty': "@lang('global.zero_pages')",
            "sProcessing": "@lang('global.processing')",
            oPaginate: {
                "sFirst": "@lang('global.first')",
                "sLast": "@lang('global.last')",
                "sNext": "@lang('global.next')",
                "sPrevious": "@lang('global.previous')"
            },
        },
        processing: true,
       serverSide: false,
        autoWidth: false,
        ordering: false,
        ajax: '{{route("dashboard.users.driver.datatable")}}',
        columns: [
            {data: 'id', name: 'id'},
            {data: 'image', name: 'image'},
            {data: 'email', name: 'email'},
            {data: 'phone_number', name: 'phone_number'},
            {data: 'approve', name: 'approve'},
            {data: 'approved',name:'approved'},
            {data: 'block', name: 'block'},
            {data: 'created_at', name: 'created_at'},
            {data: 'actions', name: 'actions'},
        ],
        initComplete: function () {
            // Button bloacked
            $("table").on("click", "#dt-btn-action", function () {
                var action_id = $(this).attr("data-actionId");
                let url = $(this).data("url");
                $.ajax({
                    url: url,
                    method: "POST",
                    success: function () {
                        table.ajax.reload(null, false);
                    }
                })
            });
            //End Button bloacked
            // Button bloacked
            $("table").on("click", "#actionDelete", function () {
                let url = $(this).data("url");
                console.log(url);
                swal(
                    {
                        title: "{{trans('global.delete_confirm')}}",
                        type: "warning",
                        showLoaderOnConfirm: true,
                        showCancelButton: true,
                        confirmButtonColor: "#ee0707",
                        confirmButtonText: "{{trans('global.yes')}}",
                        cancelButtonText: "{{trans('global.cancel')}}",
                        closeOnConfirm: false,
                    },
                    function (isConfirm) {
                        if (isConfirm) {
                            $.ajax({
                                url: url,
                                method: "get",
                                success: function () {
                                    table.ajax.reload(null, false);
                                }
                            });
                            swal.close();
                        }
                    });
            });
            //End Button bloacked
        }
    });
    App.reloadTable = function () {
        table.ajax.reload();
    }
});
</script>

@endpush