@extends('admin.layouts.app')
@section('title', 'پنل مدیریت | تماس با ما')
@section('content')
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark">تماس با ما</h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-left">
                            {{ Breadcrumbs::render('contact') }}
                        </ol>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->

        <!-- Main content -->
        <section class="content">
            <div class="container-fluid bg-white py-3">
                <div class="mb-4 row">
                    <div class="col-lg-3 col-12">
                        <select id="category_id" name="category_id">
                            <option value="">تمام دسته‌بندی‌ها</option>
                            @foreach($categories as $category)
                                <option value="{{ $category->id }}">{{ $category->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="table-responsive-sm table-responsive-md">
              {{ $dataTable->table() }}
            </div>
            </div><!-- /.container-fluid -->
        </section>
        <!-- /.content -->
    </div>
@endsection
@section('footer')
    {{ $dataTable->scripts() }}
    <script>
        $(document).ready(function () {
            $('#category_id').select2();
            $('#category_id').on('change', function (e) {
                var category_id = $('#category_id').select2("val");
                $("#contacts-table").DataTable().destroy();
                window.LaravelDataTables = window.LaravelDataTables||{};
                window.LaravelDataTables["contacts-table"] = $("#contacts-table").DataTable({
                    "serverSide":true,
                    "processing":true,
                    "ajax":{ "data": { 'category_id': category_id } },
                    "columns":[
                        {"data":"DT_RowIndex","name":"DT_RowIndex","title":"#","orderable":false,"searchable":false},
                        {"data":"name","name":"name","title":"نام","orderable":true,"searchable":true},
                        {"data":"mobile","name":"mobile","title":"موبایل","orderable":true,"searchable":true},
                        {"data":"message","name":"message","title":"پیام","orderable":true,"searchable":true},
                        {"data":"checked","name":"checked","title":"وضعیت","orderable":true,"searchable":true},
                        {"data":"created_at","name":"created_at","title":"تاریخ","orderable":true,"searchable":true},
                        {"data":"action","name":"action","title":"عملیات","orderable":false,"searchable":false,"className":"text-center"}
                    ],
                    "dom":"Bfrtip",
                    "order":[[5,"desc"]],
                    "language":{"url":"{{ asset('vendor/datatables/Persian.json') }}"},
                    "buttons":[{"extend":"excel"},{"extend":"print"},{"extend":"reset"},{"extend":"reload"}]
                });
            });
        });
    </script>
@endsection