@extends('layouts.base')

@section('title')
{{ config('app.name') }} Backend | List
@endsection

@section('breadcrumb')
<li class="breadcrumb-item"><a href="javascript:void(0);">Dashboard</a></li>
<li class="breadcrumb-item active" aria-current="page"><a href="javascript:void(0);">List</a></li>
@endsection

@section('tablecontent')
<table id="style-3" class="table style-3 table-hover wrap">
    <thead>
        <tr>
            <th>No</th>
            <th style="width:500px">Column</th>
            <th class="text-center dt-no-sorting">Action</th>
        </tr>
    </thead>
    <tbody>
        @for ($i = 1; $i < 50; $i++)
        <tr>
            <td>{{ $i }}</td>
            <td>{{ Illuminate\Support\Str::random(40); }}</td>
            <td class="text-center">
                <ul class="table-controls">
                    <li><a href="javascript:void(0);" class="bs-tooltip" data-toggle="tooltip" data-placement="top" title="" data-original-title="View"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye p-1 br-6 mb-1"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg></a></li>
                    <li><a href="javascript:void(0);" class="bs-tooltip" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-2 p-1 br-6 mb-1"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg></a></li>
                    <li><a href="javascript:void(0);" class="bs-tooltip" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash p-1 br-6 mb-1"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg></a></li>
                </ul>
            </td>
        </tr>
        @endfor
    </tbody>
</table>
@endsection

@section('content')
<div class="col-lg-12">
    <div class="statbox widget box box-shadow">
        <div class="widget-content widget-content-area">
            @yield('tableform')
            <div class="table-responsive">
                @yield('tablecontent')
            </div>
        </div>
    </div>
</div>
@endsection

@section('customcss')
<link rel="stylesheet" type="text/css" href="{{ asset('plugins/table/datatable/datatables.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('plugins/table/datatable/dt-global_style.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('plugins/table/datatable/custom_dt_custom.css') }}">
<style>
#style-3.table td img {
    width: 80px;
    border-radius: 6px;
    margin-right: 10px;
    padding: 2px;
    align-self: center;
}
</style>
@endsection

@section('table_order_sort')'asc'@endsection

@section('customjs')
<script src="{{ asset('plugins/table/datatable/datatables.js') }}"></script>
<script>
customdatatable = $('#style-3').DataTable({
    "dom": "<'dt--top-section'<'row'<'col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center'l><'col-12 col-sm-6 d-flex justify-content-sm-end justify-content-center mt-sm-0 mt-3'f>>>" +
    "<'table-responsive'tr>" +
    "<'dt--bottom-section d-sm-flex justify-content-sm-between text-center'<'dt--pages-count  mb-sm-0 mb-3'i><'dt--pagination'p>>",
        "oLanguage": {
            "oPaginate": { "sPrevious": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>', "sNext": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>' },
            "sInfo": "Showing page _PAGE_ of _PAGES_",
            "sSearch": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
            "sSearchPlaceholder": "Search...",
            "sLengthMenu": "Results :  _MENU_",
        },
        "stripeClasses": [],
        "lengthMenu": [5, 10, 20, 50],
        "pageLength": 20,
        "autoWidth": false,
        "order": [[@yield('table_order_column', 0), @yield('table_order_sort', '')]],
        "columnDefs": [
            @yield('table_column_defs')
        ]
});
customdatatable.columns.adjust().draw();
$('.delete-confirm').click(function(e){
    e.preventDefault() // Don't post the form, unless confirmed
    if (confirm('Are you sure?')) {
        $(e.target).closest('form').submit() // Post the surrounding form
    }
});
</script>
@endsection