@extends('adminlte::page')
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
    #ss {
        margin: 30px;
    }
</style>
@section('content')
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Reciprocal Introduction</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{route('admin.home')}}">Home</a></li>
                    <li class="breadcrumb-item">Reciprocal Introduction</li>
                    <!-- <li class="breadcrumb-item active">Orders</li> -->
                </ol>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>

<!-- Main content -->
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">


                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Reciprocal Introduction</h3>
                    </div>
                    <div class="filter-group pl-4 pt-4">

                    </div>


                    <div class="card-body table-responsive">
                        <!-- <p class="text-right font-bold mb-2 total_clients">Total No. of Contact: 0</p> -->
                        <table id="example" class="table table-bordered table-striped ">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Member Name</th>
                                    <th>Visit Date</th>
                                    <th>Total Visit Person</th>
                                    <th>Affiliated Club Name</th>
                                    <th>Affiliated City Name</th>
                                    <th>National / International</th>
                                    <th>Checking Date</th>
                                    <th>Checkout Date</th>
                                    <th>Created At</th>
                                    <th>Admin Accept</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($reciprocalIntroductions as $reciprocalIntroduction)
                                <tr>
                                    <td>{{ $reciprocalIntroduction->id }}</td>

                                    <!-- Member Name without relationship -->
                                    <td>
                                        @php
                                        $member = \App\Models\User::where('id',
                                        $reciprocalIntroduction->member_id)->first();
                                        @endphp
                                        {{ $member ? $member->name : 'N/A' }}
                                    </td>

                                     <td>{{ optional($reciprocalIntroduction->visit_date)->format('Y-m-d') }}</td>

                                    <td>{{ $reciprocalIntroduction->no_of_visit_person }}</td>
                                    <td>{{ $reciprocalIntroduction->affiliated_club_name }}</td>
                                    <td>{{ $reciprocalIntroduction->affiliated_city_name }}</td>
                                    <td>{{ $reciprocalIntroduction->national_international }}</td>
                                     <td>{{ optional($reciprocalIntroduction->checking_date)->format('Y-m-d') }}</td>

                                     <td>{{ optional($reciprocalIntroduction->checkout_date)->format('Y-m-d') }}</td>

                                    <td>{{ optional($reciprocalIntroduction->created_at)->format('Y-m-d') }}</td>
                                    <td id="status-cell-{{ $reciprocalIntroduction->id }}">
                                        @if ($reciprocalIntroduction->is_admin_accept == 2)
                                        {{-- Pending: show both buttons --}}
                                        <button class="btn btn-success btn-sm admin-action"
                                            data-id="{{ $reciprocalIntroduction->id }}" data-status="1">
                                            Accept
                                        </button>

                                        <button class="btn btn-danger btn-sm admin-action"
                                            data-id="{{ $reciprocalIntroduction->id }}" data-status="0">
                                            Reject
                                        </button>
                                        @elseif ($reciprocalIntroduction->is_admin_accept == 1)
                                        {{-- Already accepted --}}
                                        <button class="btn btn-success btn-sm" disabled>
                                            Accepted
                                        </button>
                                        @elseif ($reciprocalIntroduction->is_admin_accept == 0)
                                        {{-- Already rejected --}}
                                        <button class="btn btn-danger btn-sm" disabled>
                                            Rejected
                                        </button>
                                        @endif
                                    </td>




                                </tr>
                                @empty
                                <tr>
                                    <td colspan="11" class="text-center">No records found</td>
                                </tr>
                                @endforelse
                            </tbody>

                            <tfoot>
                                <tr>
                                    <th>ID</th>
                                    <th>Member Id</th>
                                    <th>Affiliated Club Id</th>
                                    <th>Visit Date</th>
                                    <th>Total Visit Person</th>
                                    <th>Affiliated Club Name</th>
                                    <th>Affiliated City Name</th>
                                    <th>National International</th>
                                    <th>Checking Date</th>
                                    <th>Checkout Date</th>
                                    <th>Admin Accept</th>
                                    <!-- <th data-orderable="false">Actions</th> -->
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                    <!-- /.card-body -->
                </div>
                <!-- /.card -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </div>
    <!-- /.container-fluid -->
    <!-- /.modal add-->

    <!-- /.modal pop image-->

    <div class="modal fade" id="imagemodal" tabindex="-1" role="dialog"
        aria-labelledby="myModreciprocalIntroductionabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" style="min-width: 700px;">
                <div class="modal-body">
                    <button type="button" class="close" data-dismiss="modal"><span
                            aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <img src="" class="imagepreview" style="width: 100%;">
                </div>
            </div>
        </div>
    </div>

</section>
<!-- /.content -->
<style>
    .select2-container--default .select2-selection--single {
        height: 35px;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 35px;
    }
</style>

@stop

@section('js')

<script>
    $('#example').DataTable();
</script>
<!-- Include SweetAlert2 -->
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>

  document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.admin-action').forEach(function (btn) {
        btn.addEventListener('click', function () {
            let id = this.dataset.id;
            let status = this.dataset.status;

            fetch('/admin/reciprocal-toggle', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({ id: id, status: status })
            })
            .then(res => res.json())
            .then(data => {
                if (data.status === 'success') {
                    let cell = document.getElementById('status-cell-' + id);
                    if (status == 1) {
                        cell.innerHTML = `<button class="btn btn-success btn-sm" disabled>Accepted</button>`;
                    } else {
                        cell.innerHTML = `<button class="btn btn-danger btn-sm" disabled>Rejected</button>`;
                    }

                    Swal.fire({
                        icon: 'success',
                        title: 'Updated!',
                        text: data.message,
                        timer: 1500,
                        showConfirmButton: false
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error!',
                        text: data.message,
                        timer: 1500,
                        showConfirmButton: false
                    });
                }
            });
        });
    });
});

</script>



@stop