@extends('backend.template')
@section('content')
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h2>{{ label('Enquiries List') }}</h2>
        </div>
        <div class="card-body">
            <table class="dataTable table" id="tbl_enquiries">
                <thead class="table-light">
                    <tr>
                        <th class="tb-col"><span class="overline-title">{{ label('S.N') }}</span></th>
                        <th class="tb-col"><span class="overline-title">{{ label('Name') }}</span></th>
                        <th class="tb-col"><span class="overline-title">{{ label('Email') }}</span></th>
                        <th class="tb-col"><span class="overline-title">{{ label('contact') }}</span></th>
                        <th class="tb-col"><span class="overline-title">{{ label('Score') }}</span></th>
                        <th class="tb-col"><span class="overline-title">{{ label('Passed Year') }}</span></th>
                        <th class="tb-col" data-sortable="false"><span class="overline-title">{{ label('Action') }}</span>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    @php
                        $i = 1;
                    @endphp
                    @foreach ($data as $item)
                        @php
                            $isRead = $item->is_read == 0 ? true : false;
                        @endphp
                        <tr data-id="{{ $item->id }}" data-display_order="{{ $item->display_order }}"
                            class="draggable-row">
                            <td class="tb-col {{ $isRead ? 'text-success' : 'text-muted' }}">{{ $i++ }}</td>
                            <td class="tb-col {{ $isRead ? 'text-success' : 'text-muted' }}">{{ $item->name }}</td>
                            <td class="tb-col {{ $isRead ? 'text-success' : 'text-muted' }}">{{ $item->email }}</td>
                            <td class="tb-col {{ $isRead ? 'text-success' : 'text-muted' }}">{{ $item->phone }}</td>
                            <td class="tb-col {{ $isRead ? 'text-success' : 'text-muted' }}">{{ $item->score }}</td>
                            <td class="tb-col {{ $isRead ? 'text-success' : 'text-muted' }}">{{ $item->passed_year }}</td>
                            <td class="tb-col">
                                <div class="dropdown d-inline-block">
                                    <button class="btn btn-soft-secondary btn-sm dropdown" type="button"
                                        data-bs-toggle="dropdown" aria-expanded="false">
                                        <i class="ri-more-fill align-middle"></i>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end">
                                        <li>
                                            <a href="{{ route('enquiry.destroy', $item->enquiry_id) }}"
                                                class="dropdown-item" onclick="confirmDelete(this.href)">
                                                <i class="ri-delete-bin-fill text-muted me-2 align-bottom"></i>
                                                {{ label('Delete') }}
                                            </a>
                                            {{-- @if ($item->is_read == 0)
                                                <a href="{{ route('enquiry.markAsRead', ['id' => $item->id]) }}"
                                                    class="dropdown-item" onclick="confirmRead(this.href)">
                                                    <i class="ri-mail-check-line text-muted me-2 align-bottom"></i>
                                                    {{ label('Mark as read') }}
                                                </a>
                                            @endif --}}
                                        </li>
                                        {{-- <li>
                      <a href="{{ route('enquiry.markread', ['id' => $item->id]) }}"
                        class="dropdown-item remove-item-btn">
                        <i class="ri-delete-bin-fill text-muted me-2 align-bottom"></i>
                        {{ label('Mark Read') }}
                      </a>
                    </li> --}}
                                    </ul>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    </div>
@endsection

@push('css')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.5/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/rowreorder/1.4.0/css/rowReorder.dataTables.min.css">
@endpush
@push('js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.68/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.68/vfs_fonts.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.5/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/rowreorder/1.4.0/js/dataTables.rowReorder.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>


    <script>
        $(document).ready(function() {
            var mytable = $(".dataTable").DataTable({
                ordering: true,
                rowReorder: {
                    //selector: 'tr'
                },
            });
        })

        function confirmDelete(url) {
            event.preventDefault();
            Swal.fire({
                title: 'Are you sure?',
                text: 'You will not be able to recover this item!',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Delete',
                cancelButtonText: 'Cancel',
                reverseButtons: true
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: url,
                        type: 'DELETE',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(response) {
                            Swal.fire('Deleted!', 'The item has been deleted.', 'success');
                            location.reload();
                        },
                        error: function(xhr, status, error) {
                            Swal.fire('Error!', 'An error occurred while deleting the item.', 'error');
                        }
                    });
                }
            });
        }

        function confirmRead(url) {
            event.preventDefault();
            Swal.fire({
                title: 'Are you sure?',
                text: 'It will be marked as read',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Mark as read',
                cancelButtonText: 'Cancel',
                reverseButtons: true
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: url,
                        type: 'post',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(response) {
                            Swal.fire('Mark!', 'The item has been marked as read.', 'success');
                            location.reload();
                        },
                        error: function(xhr, status, error) {
                            Swal.fire('Error!', 'An error occurred while marking the item.', 'error');
                        }
                    });
                }
            });
        }
    </script>
@endpush