@extends('layout')

@section('styles')
    <style>
        .managing_main_div {
            display: flex;
            gap: 20px;
            flex-direction: column;
            padding: 0px 20px;

        }

        .review_heading h2 {
            font-size: 18px;
            color: #2ca5d6;

        }

        .content_div {
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
            padding: 20px;
            overflow: auto;
        }

        table {
            border-collapse: collapse;
            width: 100%;
        }

        th {
            font-size: 14px;
            font-weight: 500;
            color: #2ca5d6;
        }

        td {
            font-size: 14px;
            font-weight: 400;
        }

        .RedirectButton {
            cursor: pointer;
            text-decoration: none;
            font-size: 14px;
            font-weight: 400;
            border-radius: 40px;
            padding: 5px 20px;
            background: linear-gradient(100deg, #2ca5d6, #32cd32);
            color: #fff;
            border: none;
        }
    </style>
@endsection

@section('content')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
    <div class="managing_main_div">
        <div class="review_heading">
            <h2 class="text-3xl">Partners List</h2>
        </div>
        <div class="content_div">
            <div class="user_div">
                <table id="partnersTable" class="display" style="width:100%">
                    <thead>
                        <tr>
                            <th>Sr.No</th>
                            <th>Name</th>
                            <th>Mobile</th>
                            <th>Email</th>
                            <th>Status</th>
                            <th>Doc-verify</th>
                            <th>View</th>
                            <th>Block</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($partners as $index => $partner)
                            <tr>
                                <td>{{ $index + 1 }}</td>
                                <td>{{ $partner->name }}</td>
                                <td>{{ $partner->contact }}</td>
                                <td>{{ $partner->email ?? 'N/A' }}</td>
                                <td>{{ ucfirst($partner->status) }}</td>
                                <th>{{ $partner->partnerRegistration->status ?? 'N/A' }}</th>
                                <td>
                                    <button type="button" class="RedirectButton" data-bs-toggle="modal"
                                        data-bs-target="#partnerModal{{ $partner->id }}">
                                        View More
                                    </button>
                                </td>
                                <td>
                                    <form action="{{ route('admin.partner.block-toggle') }}" method="POST">
                                        @csrf
                                        <input type="hidden" name="partner_id" value="{{ $partner->id }}">
                                        <button type="submit" class="RedirectButton">
                                            {{ $partner->status === 'inactive' ? 'Unblock' : 'Block' }}
                                        </button>
                                    </form>
                                </td>

                            </tr>
                        @endforeach
                    </tbody>
                </table>

                <!-- 🔥 MODALS OUTSIDE LOOP TABLE -->
                @foreach ($partners as $index => $partner)
                    <div class="modal fade" id="partnerModal{{ $partner->id }}" tabindex="-1" aria-hidden="true">
                        <div class="modal-dialog modal-xl modal-dialog-centered">
                            <div class="modal-content p-3">
                                <div class="modal-header">
                                    <h5 class="modal-title">Partner Details</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                </div>
                                <div class="modal-body">

                                    {{-- Basic Details --}}
                                    <h6 class="mb-2 fw-bold">Basic Details</h6>
                                    <div class="table-responsive">
                                        <table class="table table-bordered">
                                            <thead class="table-light">
                                                <tr>
                                                    <th>Sr.no</th>
                                                    <th>Name</th>
                                                    <th>Email</th>
                                                    <th>Mobile</th>
                                                    <th>Address</th>
                                                    <th>Document Verify</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>1</td>
                                                    <td>{{ $partner->name }}</td>
                                                    <td>{{ $partner->email ?? 'No Data' }}</td>
                                                    <td>{{ $partner->contact }}</td>
                                                    <td>{{ $partner->partnerRegistration->address ?? 'N/A' }}</td>
                                                    <td>{{ ucfirst($partner->partnerRegistration->status ?? 'N/A') }}
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>


                                    {{-- Vendor Bank Details --}}
                                    <h6 class="mt-3 mb-2 fw-bold">Vendor Bank Details</h6>
                                    <div class="table-responsive">
                                        <table class="table table-bordered">
                                            <thead class="table-light">
                                                <tr>
                                                    <th>Sr.no</th>
                                                    <th>Bank Holder</th>
                                                    <th>Account Number</th>
                                                    <th>Bank Name</th>
                                                    <th>IFSC Code</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>1</td>
                                                    <td>{{ $partner->bankDetails->account_holder_name ?? 'N/A' }}</td>
                                                    <td>{{ $partner->bankDetails->account_number ?? 'N/A' }}</td>
                                                    <td>{{ $partner->bankDetails->bank ?? 'N/A' }}</td>
                                                    <td>{{ $partner->bankDetails->ifsc_code ?? 'N/A' }}</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>

                                    {{-- Vendor Documents --}}
                                    <h6 class="mt-3 mb-2 fw-bold">Vendor Documents</h6>
                                    @php
                                        $docs = $partner->partnerRegistration ?? null;
                                        $docFields = [
                                            'aadhaar_front' => 'Aadhaar Front',
                                            'aadhaar_back' => 'Aadhaar Back',
                                            'pan_card' => 'PAN Card',
                                            'driver_license' => 'Driver License',
                                            'vehicle_registration' => 'Vehicle Registration',
                                        ];
                                    @endphp

                                    @if ($docs)
                                        <div class="row g-3">
                                            @foreach ($docFields as $field => $label)
                                                @if (!empty($docs->$field))
                                                    <div class="col-md-2 col-sm-4 col-6">
                                                        <div class="card h-100 border rounded shadow-sm">
                                                            <a href="#" data-bs-toggle="modal"
                                                                data-bs-target="#imagePreviewModal"
                                                                data-image="{{ asset('storage/' . $docs->$field) }}"
                                                                data-label="{{ $label }}">
                                                                <img src="{{ asset('storage/' . $docs->$field) }}"
                                                                    alt="{{ $label }}"
                                                                    class="card-img-top rounded-top preview-image"
                                                                    style="height: 120px; object-fit: cover; cursor: zoom-in;">
                                                            </a>
                                                            <div class="card-body p-2">
                                                                <p class="card-text text-center small m-0">
                                                                    {{ $label }}</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endif
                                            @endforeach
                                        </div>
                                    @else
                                        <p class="text-center text-muted">No documents available</p>
                                    @endif


                                    @if ($docs && $docs->status === 'pending')
                                        <form method="POST"
                                            action="{{ route('admin.partner-registration.status-update') }}"
                                            class="mt-3 d-flex gap-2">
                                            @csrf
                                            <input type="hidden" name="partner_id" value="{{ $partner->id }}">

                                            <button type="submit" name="status" value="approve"
                                                class="btn btn-success btn-sm">Approve</button>
                                            <button type="submit" name="status" value="reject"
                                                class="btn btn-danger btn-sm">Reject</button>
                                        </form>
                                    @endif



                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach

                <!-- ✅ Global Image Preview Modal -->
                <div class="modal fade" id="imagePreviewModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content" style="max-width: 500px; margin: auto;">
                            <div class="modal-header">
                                <h5 class="modal-title" id="previewModalTitle">Preview</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                            </div>
                            <div class="modal-body text-center p-3" style="max-height: 80vh; overflow-y: auto;">
                                <div style="width:100%; height:400px;">
                                    <img id="previewModalImage" src="" class="rounded border shadow-sm"
                                        alt="Preview Image" style="width: 100%; height: 100%; object-fit: contain;" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>



            </div>
        </div>

    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#partnersTable').DataTable({
                scrollY: '400px',
                scrollCollapse: true,
                paging: true
            });
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const previewModal = document.getElementById('imagePreviewModal');
            const partnerModals = document.querySelectorAll('.modal');

            let previousOpenPartnerModal = null;

            previewModal.addEventListener('show.bs.modal', function(event) {
                const trigger = event.relatedTarget;
                const imageSrc = trigger.getAttribute('data-image');
                const label = trigger.getAttribute('data-label');

                // Set image and title
                document.getElementById('previewModalImage').src = imageSrc;
                document.getElementById('previewModalTitle').innerText = label + ' - Preview';

                // Pause partner modal backdrop
                previousOpenPartnerModal = trigger.closest('.modal');
                if (previousOpenPartnerModal) {
                    bootstrap.Modal.getInstance(previousOpenPartnerModal).hide();
                }
            });

            previewModal.addEventListener('hidden.bs.modal', function() {
                document.body.style.overflow = 'auto';

                // Restore partner modal
                if (previousOpenPartnerModal) {
                    const modal = new bootstrap.Modal(previousOpenPartnerModal);
                    modal.show();
                    previousOpenPartnerModal = null;
                }
            });

            previewModal.addEventListener('show.bs.modal', function() {
                document.body.style.overflow = 'hidden';
            });
        });
    </script>
@endsection