@extends('layouts.master')
@section('title', 'Pages')
@push('styles')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="{{ asset('assets/css/dataTables.bootstrap5.min.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />
    <script src="{{ asset('assets/js/plugins/jquery-1.9.1.min.js') }}"></script>
@endpush
@section('content')
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-header pb-0">
                        <div class="row">
                            <div class="col-md-6">
                                <h6 class="mb-0">Pages Table</h6>
                            </div>
                            <div class="col-md-6 d-flex justify-content-end align-items-center">
                                <a class="btn btn-primary mx-2" href="{{ route('pages.create') }}"><i
                                        class="fa-solid fa-plus me-2"></i>Add New Page</a>
                            </div>
                        </div>
                    </div>
                    <div class="card-body px-3 pt-4 pb-2">
                        <div class="table-responsive p-0">
                            <table id="datatable" class="table pages-datatable mb-0" style="width:100%">
                                <thead>
                                <tr>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Page Title</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Slug</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Home page</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Page Status</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Action</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script src="{{ asset('assets/js/plugins/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/js/plugins/dataTables.bootstrap5.min.js') }}"></script>
    <script>
        $(function() {
            $(document).on('click', '.fa-star', function() {

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });

                $.ajax({
                    url: "{{ route('page.home') }}",
                    type: "POST",
                    dataType: "json",
                    data: {
                        id: $(this).attr('data-id'),
                    },
                    success: function(e) {
                        toastr.success(e.success);
                        table.draw();
                    },
                    error: function error() {
                        toastr.error("Something went wrong. Please try again.");
                    }
                });
            });

            $(document).on('change', '.change-status', function() {
                var status = $(this).prop('checked') == true ? 1 : 0;
                var id = $(this).attr('data-id');
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });

                $.ajax({
                    url: "{{ route('page.status') }}",
                    type: "POST",
                    dataType: "json",
                    data: {
                        'status': status,
                        'id': id
                    },
                    success: function(e) {
                        toastr.success(e.success);
                    },
                    error: function error() {
                        toastr.error("Something went wrong. Please try again.");
                    }
                });

            })

            var table = $('.pages-datatable').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('pages.index') }}",
                "lengthChange": false,
                info: false,
                "language": {
                    "paginate": {
                        "previous": "Prev"
                    }
                },
                columns: [
                    {data: 'title', name: 'title'},
                    {data: 'slug', name: 'slug'},
                    {
                        data: 'home_page',
                        name: 'home_page',
                        render: function(data, type, full, meta, home) {
                            var home = data === 1 ? 'fa-solid' : '';
                            return "<i class='fa-regular fa-star ms-4 " + home +
                                "' name='home_page' style='cursor:pointer' data-id=" + full.id +
                                " value =" +
                                data + "></i>";
                        }
                    },
                    {
                        data: 'status',
                        name: 'status',
                        render: function(data, type, full, meta, status) {
                            var status = data === 1 ? 'checked' : '';
                            return "<div class='form-check form-switch ms-2'><input class='form-check-input change-status' name='status' type='checkbox' role='switch' data-id =" +
                                full.id + " id='flexSwitchCheckDefault' value=" + data + " " +
                                status + "></div>";
                        }
                    },
                    {data: 'action', name: 'action', orderable: false, searchable: false},
                ]
            });
        });
    </script>
@endpush