@extends('dashboard.admin.layouts.master')

@section('toolbar')
    <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
        <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
            <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">{{ trans('dash_site.contact_messages') }}</h1>
            <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                <li class="breadcrumb-item text-muted"><a href="{{ route('admin.dashboard') }}" class="text-muted text-hover-primary">{{ trans('dash_site.home') }}</a></li>
                <li class="breadcrumb-item"><span class="bullet bg-gray-400 w-5px h-2px"></span></li>
                <li class="breadcrumb-item text-muted">{{ trans('dash_site.siteData') }}</li>
                <li class="breadcrumb-item"><span class="bullet bg-gray-400 w-5px h-2px"></span></li>
                <li class="breadcrumb-item text-muted">{{ trans('dash_site.contact_messages') }}</li>
            </ul>
        </div>
    </div>
@endsection

@section('content')
    <div id="kt_app_content_container" class="app-container container-xxxl">
        <div class="row g-5 mb-7">
            @foreach ([
                ['all', 'bi-envelope-paper', 'primary', $totalCount, trans('dash_site.contact_total')],
                ['unread', 'bi-envelope-exclamation', 'warning', $unreadCount, trans('dash_site.contact_unread')],
                ['all', 'bi-calendar-check', 'success', $todayCount, trans('dash_site.contact_today')],
            ] as [$filter, $icon, $color, $count, $label])
                <div class="col-md-4">
                    <a href="javascript:void(0)" class="card card-flush h-100 hover-elevate-up" data-read-filter="{{ $filter }}">
                        <div class="card-body d-flex align-items-center py-6">
                            <span class="symbol symbol-50px me-5">
                                <span class="symbol-label bg-light-{{ $color }}"><i class="bi {{ $icon }} fs-2x text-{{ $color }}"></i></span>
                            </span>
                            <div>
                                <div class="fs-2hx fw-bold text-gray-900 lh-1">{{ $count }}</div>
                                <div class="text-muted fw-semibold mt-1">{{ $label }}</div>
                            </div>
                        </div>
                    </a>
                </div>
            @endforeach
        </div>

        <div class="card card-flush">
            <div class="card-header border-0 pt-6 align-items-center">
                <div class="card-title">
                    <div class="d-flex align-items-center position-relative my-1">
                        <i class="bi bi-search fs-5 position-absolute ms-4 text-muted"></i>
                        <input type="text" id="contactSearch" class="form-control form-control-solid w-250px ps-12" placeholder="{{ trans('dash_site.contact_search') }}">
                    </div>
                </div>
                <div class="card-toolbar">
                    <div class="btn-group" role="group" id="readStateFilter">
                        <button type="button" class="btn btn-sm btn-light-primary active" data-state="all">{{ trans('dash_site.contact_all') }}</button>
                        <button type="button" class="btn btn-sm btn-light-primary" data-state="unread">{{ trans('dash_site.contact_unread') }}</button>
                        <button type="button" class="btn btn-sm btn-light-primary" data-state="read">{{ trans('dash_site.contact_read') }}</button>
                    </div>
                </div>
            </div>
            <div class="card-body pt-0">
                <table class="table align-middle table-row-dashed fs-6 gy-4" id="data">
                    <thead>
                    <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                        <th class="min-w-200px">{{ trans('dash_site.contact_sender') }}</th>
                        <th class="min-w-250px">{{ trans('dash_site.Subject') }}</th>
                        <th class="min-w-100px">{{ trans('dash_site.contact_received_at') }}</th>
                        <th>{{ trans('dash_site.contact_status') }}</th>
                        <th class="text-end">{{ trans('forms.Action') }}</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        $(document).ready(function () {
            var readState = 'all';

            var datatable = $('#data').DataTable({
                processing: true,
                serverSide: true,
                dom: "<'table-responsive'tr><'row align-items-center mt-5'<'col-sm-12 col-md-5 d-flex align-items-center gap-3'li><'col-sm-12 col-md-7 d-flex justify-content-end'p>>",
                ajax: {
                    url: "{{ route('admin.contact.index') }}",
                    data: function (d) { d.read_state = readState; }
                },
                columns: [
                    {data: 'name', name: 'name'},
                    {data: 'subject', name: 'subject'},
                    {data: 'created_at', name: 'created_at', searchable: false},
                    {data: 'is_read', name: 'is_read', searchable: false},
                    {data: 'action', name: 'action', orderable: false, searchable: false},
                ],
                order: [[2, 'desc']],
                language: {lengthMenu: '_MENU_'}
            });

            var searchTimer;
            $('#contactSearch').on('keyup', function () {
                clearTimeout(searchTimer);
                var value = this.value;
                searchTimer = setTimeout(function () { datatable.search(value).draw(); }, 300);
            });

            function setReadState(state) {
                readState = state;
                $('#readStateFilter button').removeClass('active').filter('[data-state="' + state + '"]').addClass('active');
                datatable.ajax.reload();
            }

            $('#readStateFilter').on('click', 'button', function () { setReadState($(this).data('state')); });
            $('[data-read-filter]').on('click', function () { setReadState($(this).data('read-filter')); });

            $('#data').on('submit', 'form[data-confirm-delete]', function (event) {
                var form = this;
                if (form.dataset.confirmed) {
                    return;
                }
                event.preventDefault();
                Swal.fire({
                    text: form.dataset.confirmDelete,
                    icon: 'warning',
                    showCancelButton: true,
                    buttonsStyling: false,
                    confirmButtonText: "{{ trans('forms.delete_btn') }}",
                    cancelButtonText: "{{ trans('dash_site.Cancel') }}",
                    customClass: {confirmButton: 'btn btn-danger', cancelButton: 'btn btn-light'}
                }).then(function (result) {
                    if (result.isConfirmed) {
                        form.dataset.confirmed = '1';
                        form.submit();
                    }
                });
            });
        });
    </script>
@endsection