@extends('admin.layouts.app')

@push('style')
    <link href="https://cdn.datatables.net/2.1.6/css/dataTables.dataTables.css" rel="stylesheet">
@endpush

@section('content')
    <main class="main-content position-relative max-height-vh-100 h-100 border-radius-lg ">
        <!-- Navbar -->
        <nav class="navbar navbar-main navbar-expand-lg px-0 mx-4 shadow-none border-radius-xl" id="navbarBlur"
            data-scroll="true">
            <div class="container-fluid py-1 px-3">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb bg-transparent mb-0 pb-0 pt-1 px-0 me-sm-6 me-5">
                        <li class="breadcrumb-item text-sm"><a class="opacity-5 text-dark" href="javascript:;">Pages</a></li>
                        <li class="breadcrumb-item text-sm text-dark active" aria-current="page">Contact Us</li>
                    </ol>
                </nav>

                @include('admin.layouts.iconNavbarSidenav')
            </div>
        </nav>
        <!-- End Navbar -->
        <div class="container-fluid py-4">
            <div class="row">
                <div class="col-12">
                    <div class="card my-4">
                        <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
                            <div class="bg-gradient-primary shadow-primary border-radius-lg pt-4 pb-3">
                                <h6 class="text-white text-capitalize ps-3">Information Contact Us</h6>
                            </div>
                        </div>
                        <div class="card-body ">
                            @can('contact-download')
                                <a class="badge badge-sm bg-gradient-secondary" onclick="reportModal()">Report</a>
                            @endcan
                            <div class="table-responsive p-0">
                                <table class="table align-items-center mb-0" id="table-teams">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                                Name</th>

                                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                                Company</th>
                                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                                Email</th>
                                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                                Phone</th>
                                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                                Subject</th>
                                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                                Message</th>
                                            <th
                                                class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">
                                                Submit Date</th>
                                            <th class="text-secondary opacity-7 w-10"></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($data as $value)
                                            <tr>
                                                <td>{{ $loop->iteration }}</td>
                                                <td>
                                                    <p class="text-xs font-weight-bold mb-0">{{ $value->name }}</p>
                                                </td>
                                                <td>
                                                    <p class="text-xs font-weight-bold mb-0">{{ $value->company }}</p>
                                                </td>
                                                <td>
                                                    <p class="text-xs font-weight-bold mb-0">{{ $value->email }}</p>
                                                </td>
                                                <td>
                                                    <p class="text-xs font-weight-bold mb-0">{{ $value->phone }}</p>
                                                </td>
                                                <td>
                                                    <p class="text-xs font-weight-bold mb-0">{{ $value->subject }}</p>
                                                </td>
                                                <td>
                                                    <p class="text-xs font-weight-bold mb-0">{!! Str::words(strip_tags($value->message), 15, '...') !!}</p>
                                                </td>
                                                <td>
                                                    <p class="text-xs font-weight-bold mb-0">
                                                        {{ $value->created_at->format('Y-m-d H:i:s') }}</p>
                                                </td>

                                                <td>
                                                    <a class="badge badge-sm bg-gradient-secondary"
                                                        onclick="openModal({{ $value->id }})">
                                                        View
                                                    </a>
                                                    {{-- <a class="badge badge-sm bg-gradient-danger" href=""
                                                        onclick="event.preventDefault();
                                                        if (confirm('Are you sure you want to delete this?')) {
                                                            document.getElementById('news-delete').submit();
                                                        }">
                                                        Delete
                                                    </a>
                                                    <form id="news-delete"
                                                        action="" method="POST"
                                                        class="d-none">
                                                        @csrf
                                                        @method('DELETE')
                                                    </form> --}}
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </main>

    <!-- Modal -->
    <div class="modal fade" id="reportmodal" tabindex="-1" aria-labelledby="reportmodallLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5">Create Report</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{ route('contactus.report') }}" method="POST">
                    @csrf
                    <div class="modal-body">
                        <div class="col-12">
                            <label class="mb-0">Range Date</label>
                            <div class="input-group input-group-outline mb-4">
                                <input type="text" id="date_range" class="form-control" name="date_range" />
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-success btn-sm">Generate</button>
                        <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="servicemodal" tabindex="-1" aria-labelledby="servicemodalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div id="modal-content-service"></div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script src="{{ asset('https://code.jquery.com/jquery-3.7.1.js') }}"></script>
    <script src="{{ asset('https://cdn.datatables.net/2.1.6/js/dataTables.js') }}"></script>

    <script type="text/javascript" src="{{ asset('https://cdn.jsdelivr.net/jquery/latest/jquery.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('https://cdn.jsdelivr.net/momentjs/latest/moment.min.js') }}"></script>
    <script type="text/javascript"
        src="{{ asset('https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js') }}"></script>
    <link rel="stylesheet" type="text/css"
        href="{{ asset('https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css') }}" />

    <script>
        new DataTable('#table-teams');
    </script>

    <script>
        function reportModal() {
            $('#reportmodal').modal('show');
        }

        $('#date_range').daterangepicker({
            "autoApply": false,
            "showDropdowns": true,
            "alwaysShowCalendars": true,
            "timePicker": true,
            "timePicker24Hour": true,
            "locale": {
                "format": "YYYY-MM-DD HH:mm:ss"
            },

            ranges: {
                'Today': [moment().startOf('day'), moment()],
                'Yesterday': [moment().subtract(1, 'days').startOf('day'), moment().subtract(1, 'days').endOf(
                    'day')],
                'Last 7 Days': [moment().subtract(6, 'days').startOf('day'), moment()],
                'Last 30 Days': [moment().subtract(29, 'days').startOf('day'), moment()],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf(
                    'month')],
                'Last Year (Jan to Dec)': [moment().subtract(1, 'year').startOf('year'), moment().subtract(1,
                    'year').endOf('year')]
            },
        });

        function openModal(id) {
            $.ajax({
                url: "{{ route('contactus.edit') }}",
                type: 'GET',
                data: {
                    id: id
                },
                dataType: 'html',
                success: function(data) {
                    $('#modal-content-service').html(data);
                    $('#servicemodal').modal('show');
                }
            });
        }
    </script>
@endpush