@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">Contact Us Requests</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">Contact Us Requests</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('contact.us.requests') }}">
            <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="contact-us-table">
                    <thead>
                        <tr>
                            <th>Type</th>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Mobile</th>
                            <th>Subject</th>
                            <th>Message</th>
                            <th>Created On</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        $(document).ready(function() {
            var table = $('#contact-us-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: [[6, 'desc']],
                ajax: '{{ route('contact.us.requests') }}',
                columns: [
                    {
                        data: 'type',
                        name: 'type',
                    },
                    {
                        data: 'name',
                        name: 'name',
                    },
                    {
                        data: 'email',
                        name: 'email'
                    },
                    {
                        data: 'mobile',
                        name: 'mobile'
                    },
                    {
                        data: 'subject',
                        name: 'subject'
                    },
                    {
                        data: 'message',
                        name: 'message',
                        render: function(data, type, row) {
                        if (type === 'display') {
                            const words = data.split(' ');
                            let shortMessage = data;

                            if (words.length > 20) {
                                shortMessage = words.slice(0, 20).join(' ') + '...';
                                return `<div class="read-more">${shortMessage}</div>
                                        <div class="full-text d-none">${data}</div>
                                        <a href="javascript:void(0);" class="toggle-text">Read more</a>`;
                            }

                            return `<div>${data}</div>`;
                        }
                        return data;
                    }
                    },
                    {
                        data: 'created_at',
                        name: 'created_at',
                    },
                ],
                drawCallback: function(settings) {
                    $('.toggle-text').off('click').on('click', function() {
                        let $this = $(this);
                        let $readMore = $this.siblings('.read-more');
                        let $fullText = $this.siblings('.full-text');

                        if ($fullText.hasClass('d-none')) {
                            $readMore.addClass('d-none');
                            $fullText.removeClass('d-none');
                            $this.text('Read less');
                        } else {
                            $readMore.removeClass('d-none');
                            $fullText.addClass('d-none');
                            $this.text('Read more');
                        }
                    });
                }
            });
            $('#contact-us-table_filter').hide();
            $('#contact-us-table_length').hide();
            $('#searchBtn').on('click', function() {
                table.search($('#searchTerm').val()).draw(); // Use DataTable's search method
            });
            // $('.read-more').on('click').show(words=full)
            $('#searchTerm').on('keyup', function() {
                table.search(this.value).draw(); // Use DataTable's search method
            });
        });
    </script>
@endsection