@extends('layouts.admin.index')

@section('content')
    <div class="page-header page-header-light shadow">
        <div class="page-header-content d-lg-flex">
            <div class="d-flex">
                <h4 class="page-title mb-0">
                    Home - <span class="fw-normal">Reviews</span>
                </h4>

                <a href="#page_header"
                    class="btn btn-light align-self-center collapsed d-lg-none border-transparent rounded-pill p-0 ms-auto"
                    data-bs-toggle="collapse">
                    <i class="ph-caret-down collapsible-indicator ph-sm m-1"></i>
                </a>
            </div>
        </div>

        <div class="page-header-content d-lg-flex border-top">
            <div class="d-flex">
                <div class="breadcrumb py-2">
                    <a href="{{ route('admin.dashboard') }}" class="breadcrumb-item"><i class="ph-house"></i></a>
                    <a href="{{ route('admin.dashboard') }}" class="breadcrumb-item">Home</a>
                    <span class="breadcrumb-item active">Reviews</span>
                </div>

                <a href="#breadcrumb_elements"
                    class="btn btn-light align-self-center collapsed d-lg-none border-transparent rounded-pill p-0 ms-auto"
                    data-bs-toggle="collapse">
                    <i class="ph-caret-down collapsible-indicator ph-sm m-1"></i>
                </a>
            </div>
        </div>
    </div>

    <div class="content">

        @include('error-success')

        <form action="{{ route('review.rating.list') }}">
            <div class="row">
                <div class="col-lg-6"></div>
                <div class="col-lg-6">
                    <div class="row">

                        <div class="col-lg-9">
                            <div class="mb-3">
                                <input type="text" name="q" id="searchTerm" class="form-control"
                                    placeholder="Search..." value="{{ $searchTerm ?? '' }}">
                            </div>
                        </div>

                        <div class="col-lg-3" style="text-align: right">
                            <div class="mb-3">
                                <button type="button" id="searchBtn" class="btn btn-primary"
                                    style="width: 100%">Search</button>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </form>
        <div class="card">

            <div class="table-responsive">
                <table class="table table-bordered" id="review-table">
                    <thead>
                        <tr>
                            <th>Booking ID</th>
                            <th>Advisor Name</th>
                            <th>Customer Name</th>
                            <th>Rating</th>
                            <th>Review</th>
                            <th>Created On</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        $(document).ready(function() {
            $("body").on("click", ".delete-resource", function(e) {
                e.preventDefault();

                const formId = $(this).attr("data-form-id");

                console.log("formId", formId)

                Swal.fire({
                    title: 'Are you sure that you want to delete this record?',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, delete it!',
                    cancelButtonText: 'No, cancel please!'
                }).then((result) => {
                    /* Read more about isConfirmed, isDenied below */
                    if (result.isConfirmed) {
                        document.getElementById(formId).submit();
                    }
                })
            });
        });
    </script>

<script>
    $(document).ready(function() {
        var table = $('#review-table').DataTable({
            buttons: {
                dom: {
                    button: {
                        className: 'btn btn-light'
                    }
                },
                buttons: [{
                        extend: 'copy'
                    },
                    {
                        extend: 'csv'
                    },
                    {
                        extend: 'excel'
                    },
                    {
                        extend: 'pdf'
                    },
                    {
                        extend: 'print'
                    }
                ]
            },
            responsive: true,
            processing: true,
            serverSide: true,
            order: [[5, 'desc']],
            ajax: '{{ route('review.rating.list') }}',
            columns: [{
                    data: 'id',
                    name: 'id'
                },
                {
                    data: 'advisor_name',
                    name: 'advisor_detail.name'
                },
                {
                    data: 'user_name',
                    name: 'user_detail.name'
                },
                {
                    data: 'rating',
                    name: 'rating'
                },
                {
                    data: 'review',
                    name: 'review'
                },
                {
                    data: 'created_at',
                    name: 'created_at',
                },
                {
                    data: null,
                    name: 'actions',
                    orderable: false,
                    searchable: false,
                    render: function(data, type, row) {
                        let deleteFormId = `delete-form-${row.id}`;
                        let deleteUrl = `{{ route('delete.review.rating', ':id') }}`.replace(':id', row.review_id);

                        let deleteAction = row.deleted_at ?
                            '<i class="ph ph-archive" style="color:red;"></i>' :
                            `<a href="javascript:void(0)" data-form-id="${deleteFormId}" class="text-body mx-1 delete-resource" title="Delete"><i class="ph-trash"></i></a>`;

                        return `<div class="d-inline-flex">
                                ${deleteAction}
                                <form id="${deleteFormId}" style="display:none" action="${deleteUrl}" method="POST">
                                    {{ csrf_field() }}
                                    {{ method_field('DELETE') }}
                                </form>
                            </div>`;
                    }
                }
            ]
        });
        $('#review-table_filter').hide();
        $('#review-table_length').hide();
        $('#searchBtn').on('click', function() {
            table.search($('#searchTerm').val()).draw(); // Use DataTable's search method
        });
        $('#searchTerm').on('keyup', function() {
            table.search(this.value).draw(); // Use DataTable's search method
        });
    });
</script>
@endsection