@extends('backend.layouts.master')

@section('title','Location')

@section('styles')
    <link rel="stylesheet" href="{{asset('backend/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css')}}"/>
@endsection

@section('scripts')
    <script src="{{asset('backend/js/jquery.validate.min.js')}}"></script>
    <script src="{{asset('backend/js/pages/location.js')}}"></script>
    <script src="{{asset('backend/plugins/datatables/jquery.dataTables.min.js')}}"></script>
    <script src="{{asset('backend/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js')}}"></script>
    <script>
        $(function () {
            $('#locationList').DataTable({
                processing: true,
                serverSide: true,
                searching: true,
                iDisplayLength: 10,
                "ajax": {
                    url: '{{route('admin.location.paginate')}}',
                    type: 'POST',
                    data: function (d) {
                        d._token = '{{csrf_token()}}';
                    }
                },
                bPaginate: true,
                columns: [
                    {data: "index", sortable: false},
                    {data: "name", sortable: false},
                    {data: "partner_name", sortable: false},
                    {data: "state_name", sortable: false},
                    {data: "country_name", sortable: false},
                    {data: "action", sortable: false},
                ],
                lengthMenu: [
                    [10, 25, 50, 100],
                    [10, 25, 50, 100]
                ],
                "columnDefs": [
                    {
                        "render": function (data, type, row) {
                            var btn = '<a href="' + ADMIN_URL + '/location/' + row.uuid + '/edit" data-uuid="' + row.uuid + '" class="btn btn-outline-primary btn-sm mr-1 waves-effect waves-float waves-light">Edit</a>';
                            btn += '<button type="button" onclick="onDelete(this)" data-uuid="' + row.uuid + '" class="btn btn-outline-danger btn-sm waves-effect waves-float waves-light">Delete</button>';
                            return [btn].join('');
                        },
                        "targets": $('#locationList th#action').index(),
                        "orderable": false,
                        "searchable": false
                    }
                ]
            });
        });
    </script>
@endsection

@section('contents')
    <div class="content-wrapper">
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0">Location</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="{{route('admin.index')}}">Dashboard</a></li>
                            <li class="breadcrumb-item active">Location</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>

        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card card-primary">
                            <div class="card-header">
                                <h3 class="card-title">List of location</h3>
                                <a href="{{route('admin.location.create')}}"
                                   class="btn btn-light text-dark btn-sm float-right"><i class="fa fa-plus mr-1"></i>
                                    Add</a>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table id="locationList" class="table table-bordered table-hover">
                                        <thead>
                                        <tr>
                                            <th>Index</th>
                                            <th>Location Name</th>
                                            <th>Partner Name</th>
                                            <th>State Name</th>
                                            <th>Country Name</th>
                                            <th id="action">Action</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection