@extends('admin.layout.master')
@section('title', 'Contact Enquiry')
@section('content')
    <div class="d-flex flex-column flex-column-fluid">
        <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
            <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">
                    <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">Dashboard</a>
                        </li>
                        <li class="breadcrumb-item">
                            <span class="bullet bg-gray-400 w-5px h-2px"></span>
                        </li>
                        <li class="breadcrumb-item text-muted">Contact Enquiry</li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="kt_app_content_container" class="app-container container-xxl index-container">
            <div class="card mb-5 mb-xl-8">
                <div id="error_status_alert" style="display:none;">
                    <div class="alert alert-danger"> <i class="ti-check"></i>&nbsp;
                        Unable to change status. Please try later.
                    </div>
                </div>
                <div class="card-header border-0 pt-5 align-items-center">
                    <h3 class="card-title align-items-start flex-column">
                        <span class="card-label fw-bold fs-3 mb-1">Contact Enquiry List</span>
                    </h3>
                    <form method="get">
                        <div class="d-flex align-items-center gap-2 gap-lg-3">
                            <div data-kt-daterangepicker="true" data-kt-daterangepicker-opens="left"
                                class="btn btn-sm btn-light d-flex align-items-center px-4">
                                <div class="text-gray-600 fw-bold">Loading date range...</div>
                                <input type="hidden" name="start_date" id="range_start_date">
                                <input type="hidden" name="end_date" id="range_end_date">
                                <span class="svg-icon svg-icon-1 ms-2 me-0">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path opacity="0.3"
                                            d="M21 22H3C2.4 22 2 21.6 2 21V5C2 4.4 2.4 4 3 4H21C21.6 4 22 4.4 22 5V21C22 21.6 21.6 22 21 22Z"
                                            fill="currentColor" />
                                        <path
                                            d="M6 6C5.4 6 5 5.6 5 5V3C5 2.4 5.4 2 6 2C6.6 2 7 2.4 7 3V5C7 5.6 6.6 6 6 6ZM11 5V3C11 2.4 10.6 2 10 2C9.4 2 9 2.4 9 3V5C9 5.6 9.4 6 10 6C10.6 6 11 5.6 11 5ZM15 5V3C15 2.4 14.6 2 14 2C13.4 2 13 2.4 13 3V5C13 5.6 13.4 6 14 6C14.6 6 15 5.6 15 5ZM19 5V3C19 2.4 18.6 2 18 2C17.4 2 17 2.4 17 3V5C17 5.6 17.4 6 18 6C18.6 6 19 5.6 19 5Z"
                                            fill="currentColor" />
                                        <path
                                            d="M8.8 13.1C9.2 13.1 9.5 13 9.7 12.8C9.9 12.6 10.1 12.3 10.1 11.9C10.1 11.6 10 11.3 9.8 11.1C9.6 10.9 9.3 10.8 9 10.8C8.8 10.8 8.59999 10.8 8.39999 10.9C8.19999 11 8.1 11.1 8 11.2C7.9 11.3 7.8 11.4 7.7 11.6C7.6 11.8 7.5 11.9 7.5 12.1C7.5 12.2 7.4 12.2 7.3 12.3C7.2 12.4 7.09999 12.4 6.89999 12.4C6.69999 12.4 6.6 12.3 6.5 12.2C6.4 12.1 6.3 11.9 6.3 11.7C6.3 11.5 6.4 11.3 6.5 11.1C6.6 10.9 6.8 10.7 7 10.5C7.2 10.3 7.49999 10.1 7.89999 10C8.29999 9.90003 8.60001 9.80003 9.10001 9.80003C9.50001 9.80003 9.80001 9.90003 10.1 10C10.4 10.1 10.7 10.3 10.9 10.4C11.1 10.5 11.3 10.8 11.4 11.1C11.5 11.4 11.6 11.6 11.6 11.9C11.6 12.3 11.5 12.6 11.3 12.9C11.1 13.2 10.9 13.5 10.6 13.7C10.9 13.9 11.2 14.1 11.4 14.3C11.6 14.5 11.8 14.7 11.9 15C12 15.3 12.1 15.5 12.1 15.8C12.1 16.2 12 16.5 11.9 16.8C11.8 17.1 11.5 17.4 11.3 17.7C11.1 18 10.7 18.2 10.3 18.3C9.9 18.4 9.5 18.5 9 18.5C8.5 18.5 8.1 18.4 7.7 18.2C7.3 18 7 17.8 6.8 17.6C6.6 17.4 6.4 17.1 6.3 16.8C6.2 16.5 6.10001 16.3 6.10001 16.1C6.10001 15.9 6.2 15.7 6.3 15.6C6.4 15.5 6.6 15.4 6.8 15.4C6.9 15.4 7.00001 15.4 7.10001 15.5C7.20001 15.6 7.3 15.6 7.3 15.7C7.5 16.2 7.7 16.6 8 16.9C8.3 17.2 8.6 17.3 9 17.3C9.2 17.3 9.5 17.2 9.7 17.1C9.9 17 10.1 16.8 10.3 16.6C10.5 16.4 10.5 16.1 10.5 15.8C10.5 15.3 10.4 15 10.1 14.7C9.80001 14.4 9.50001 14.3 9.10001 14.3C9.00001 14.3 8.9 14.3 8.7 14.3C8.5 14.3 8.39999 14.3 8.39999 14.3C8.19999 14.3 7.99999 14.2 7.89999 14.1C7.79999 14 7.7 13.8 7.7 13.7C7.7 13.5 7.79999 13.4 7.89999 13.2C7.99999 13 8.2 13 8.5 13H8.8V13.1ZM15.3 17.5V12.2C14.3 13 13.6 13.3 13.3 13.3C13.1 13.3 13 13.2 12.9 13.1C12.8 13 12.7 12.8 12.7 12.6C12.7 12.4 12.8 12.3 12.9 12.2C13 12.1 13.2 12 13.6 11.8C14.1 11.6 14.5 11.3 14.7 11.1C14.9 10.9 15.2 10.6 15.5 10.3C15.8 10 15.9 9.80003 15.9 9.70003C15.9 9.60003 16.1 9.60004 16.3 9.60004C16.5 9.60004 16.7 9.70003 16.8 9.80003C16.9 9.90003 17 10.2 17 10.5V17.2C17 18 16.7 18.4 16.2 18.4C16 18.4 15.8 18.3 15.6 18.2C15.4 18.1 15.3 17.8 15.3 17.5Z"
                                            fill="currentColor" />
                                    </svg>
                                </span>
                            </div>
                            <div class="m-0">
                                <button type="button" onclick="filter_submit()"
                                    class="btn btn-sm btn-flex bg-light btn-color-gray-700 btn-active-color-primary fw-bold"
                                    data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
                                    <span class="svg-icon svg-icon-6 svg-icon-muted me-1">
                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M19.0759 3H4.72777C3.95892 3 3.47768 3.83148 3.86067 4.49814L8.56967 12.6949C9.17923 13.7559 9.5 14.9582 9.5 16.1819V19.5072C9.5 20.2189 10.2223 20.7028 10.8805 20.432L13.8805 19.1977C14.2553 19.0435 14.5 18.6783 14.5 18.273V13.8372C14.5 12.8089 14.8171 11.8056 15.408 10.964L19.8943 4.57465C20.3596 3.912 19.8856 3 19.0759 3Z"
                                                fill="currentColor" />
                                        </svg>
                                    </span>Filter
                                </button>
                            </div>
                            <a href="{{ route('contact-enquires') }}" class="btn btn-sm fw-bold btn-primary">Reset</a>
                        </div>
                    </form>
                </div>
                <div class="card-body py-3">
                    <div class="table-responsive" id="ajax_filter_html">
                        <table class="table table-row-dashed align-middle gs-0 gy-4" id="ds_datatable_table">
                            <thead>
                                <tr class="fw-bold">
                                    <th class="min-w-50px">#</th>
                                    <th class="min-w-125px">First Name</th>
                                    <th class="min-w-125px">Last Name</th>
                                    <th class="min-w-125px">Email</th>
                                    <th class="min-w-80px">Created At</th>
                                    <th class="min-w-125px">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($data as $key=>$value)
                                    <tr>
                                        <td><span
                                                class="text-dark fw-bold text-hover-primary mb-1 fs-6">{{ $key + 1 }}</span>
                                        </td>
                                        <td>{{ $value['firstname'] }}</td>
                                        <td>{{ $value['lastname'] }}</td>
                                        <td>{{ $value['email'] }}</td>
                                        <td>{{ date('M d, Y', strtotime($value['created_at'])) }}
                                        </td>
                                        <td>
                                            <a href="{{ route('contact_enquires_view', $value['id']) }}"
                                                class="btn btn-icon bg-light-success btn-active-color-primary btn-sm me-1">
                                                <span class="svg-icon svg-icon-3">
                                                    <svg fill="#47be7d" width="24" height="24" viewBox="0 3.5 24 24"
                                                        version="1.1" xmlns="http://www.w3.org/2000/svg">
                                                        <title>View</title>
                                                        <path
                                                            d="M12.406 13.844c1.188 0 2.156 0.969 2.156 2.156s-0.969 2.125-2.156 2.125-2.125-0.938-2.125-2.125 0.938-2.156 2.125-2.156zM12.406 8.531c7.063 0 12.156 6.625 12.156 6.625 0.344 0.438 0.344 1.219 0 1.656 0 0-5.094 6.625-12.156 6.625s-12.156-6.625-12.156-6.625c-0.344-0.438-0.344-1.219 0-1.656 0 0 5.094-6.625 12.156-6.625zM12.406 21.344c2.938 0 5.344-2.406 5.344-5.344s-2.406-5.344-5.344-5.344-5.344 2.406-5.344 5.344 2.406 5.344 5.344 5.344z">
                                                        </path>
                                                    </svg>
                                                </span>
                                            </a>
                                            <a href="javascript:void(0);" onclick="delete_data('{{ $value['id'] }}')"
                                                class="btn btn-icon bg-light-danger btn-active-color-primary btn-sm">
                                                <span class="svg-icon svg-icon-3">
                                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                                        xmlns="http://www.w3.org/2000/svg">
                                                        <title>Delete</title>
                                                        <path
                                                            d="M5 9C5 8.44772 5.44772 8 6 8H18C18.5523 8 19 8.44772 19 9V18C19 19.6569 17.6569 21 16 21H8C6.34315 21 5 19.6569 5 18V9Z"
                                                            fill="#d9214e" />
                                                        <path opacity="0.5"
                                                            d="M5 5C5 4.44772 5.44772 4 6 4H18C18.5523 4 19 4.44772 19 5V5C19 5.55228 18.5523 6 18 6H6C5.44772 6 5 5.55228 5 5V5Z"
                                                            fill="#d9214e" />
                                                        <path opacity="0.5"
                                                            d="M9 4C9 3.44772 9.44772 3 10 3H14C14.5523 3 15 3.44772 15 4V4H9V4Z"
                                                            fill="#d9214e" />
                                                    </svg>
                                                </span>
                                            </a>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="6" style="text-align:center !important;">No record found...</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
    <script>
        function filter_submit(e) {
            // var keyword = document.getElementById('keyword').value;
            var start_date = document.getElementById('range_start_date').value;
            var end_date = document.getElementById('range_end_date').value;

            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: "{{ route('contact-enquires-ajax') }}",
                type: 'GET',
                data: {
                    // keyword,
                    start_date,
                    end_date
                },
                success: function(response) {
                    $("#ajax_filter_html").html(response);
                }
            });
        }

        $(document).ready(function() {
            $("#ds_datatable_table").DataTable({
                dom: "<'row'<'col-sm-3'><'col-sm-3'>><'row'<'col-sm-12'tr>><'row'<'col-sm-12 col-md-1'l><'col-sm-12 col-md-5'i><'col-sm-12 col-md-6'p>>",
                info: 1,
                order: [],
                pageLength: 10,
                lengthChange: 1,
                language: {
                    searchPlaceholder: "Search"
                },
                columnDefs: [{
                        orderable: !1,
                        targets: 0,
                    },
                    {
                        orderable: !1,
                        targets: 5,
                    },
                ],
            });
            $('.dt-buttons').attr("class", "float-end");
        });

        function delete_data(id) {
            Swal.fire({
                icon: "warning",
                title: "Are you you sure want to delete?",
                showCancelButton: true,
                confirmButtonText: "Yes",
                cancelButtonText: `No`,
            }).then((result) => {
                if (result.isConfirmed) {
                    window.location.href = BASE_URL + "/contact-enquires-delete/" + id;
                }
            })
        }
    </script>
@endpush