@extends('layouts.app_layout')

@section('content')

<!-- CSS for smooth transition (added for better visual effect) -->
<style>
    /* Ensures the panels transition smoothly when their column classes change */
    #detailsPanel, #statusUpdatePanel {
        transition: width 0.3s ease-in-out, visibility 0.3s ease-in-out, opacity 0.3s ease-in-out;
    }
</style>

<!-- [ Page Header ] start -->
<x-page-header title="{{ $pageTitle }}" button="{!! (isset($button)) ? $button : '' !!}" />
<!-- [ Page Header ] end -->

<div class="row">
    <div class="col-12">
        <!-- Navigation Tabs -->
        <ul class="nav nav-pills mb-3 gap-1" id="pills-tab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="pills-review-tab" data-status="Pending" data-bs-toggle="pill" data-bs-target="#pills-review" type="button" role="tab" aria-controls="pills-review" aria-selected="true">
                    <i class="fa fa-hourglass-half text-warning me-1"></i> New Application
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="pills-approved-tab" data-status="Approved" data-bs-toggle="pill" data-bs-target="#pills-approved" type="button" role="tab" aria-controls="pills-approved" aria-selected="false">
                    <i class="fa fa-check-circle text-success me-1"></i> Approved
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="pills-rejected-tab" data-status="Rejected" data-bs-toggle="pill" data-bs-target="#pills-rejected" type="button" role="tab" aria-controls="pills-rejected" aria-selected="false">
                    <i class="fa fa-times-circle text-danger me-1"></i> Rejected
                </button>
            </li>
        </ul>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="dt-responsive mt-3">
                    <table id="partners-table" class="table table-striped table-bordered w-100">
                        <thead>
                            <tr>
                                <th>Sl. No.</th>
                                <th>Partner Name</th>
                                <th>Organization Type</th>
                                <th>Organization Sub Type</th>
                                <th>Director Name</th>
                                <th>Official Email</th>
                                <th>Primary Phone</th>
                                <th>Application Status</th>
                                <th>Submitted On</th>
                                <th width="10%">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {{-- DataTables will populate --}}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

            <!-- Partner Details Modal (Dynamic Split-Screen Layout) -->
            <div class="modal fade" id="partnerDetailsModal" tabindex="-1" aria-labelledby="partnerDetailsModalLabel" aria-hidden="true">
                {{-- Use modal-xl for a wide desktop view, modal-fullscreen-lg-down for mobile --}}
                <div class="modal-dialog modal-xl modal-dialog-centered modal-fullscreen-lg-down">
                    <div class="modal-content">

                        <div class="modal-header py-3 d-flex align-items-center justify-content-between">
                            <!-- Left: Title -->
                            <h5 class="modal-title mb-0" id="partnerDetailsModalLabel">
                                Partner Details <small>(<span id="modal-partner_name_title" class="fw-bold text-primary"></span>)</small>
                            </h5>


                            <!-- Center: Update Status Button -->
                            <button type="button" class="btn btn-primary btn-sm mx-3" id="toggleStatusPanelBtn" style="display: none;">
                                Update Status
                            </button>

                            <!-- Right: Close Button -->
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>


                            <div class="modal-body p-0">
                                <div class="row g-0">
                                    
                                    {{-- LEFT/MAIN PANEL: Partner Details --}}
                                    {{-- Initial state: col-lg-12 (full width) --}}
                                    <div class="col-12 col-lg-12 border-end p-4 bg-light transition-width" id="detailsPanel">
                                        <div class="card-body p-0">
                                            <h4 class="mb-4">Application Details</h4>
                                            <div class="row g-3">
                                                @php
                                                $fields = [
                                                    'darpan_id' => ['label' => 'Darpan ID', 'icon' => 'fas fa-id-badge'],
                                                    'registration_no' => ['label' => 'Registration No', 'icon' => 'fas fa-file-alt'],
                                                    'registration_certificate' => ['label' => 'Registration Certificate', 'icon' => 'fas fa-file-pdf'],
                                                    'organization_type' => ['label' => 'Organization Type', 'icon' => 'fas fa-building'],
                                                    'organization_sub_type' => ['label' => 'Organization sub Type', 'icon' => 'fas fa-building'],
                                                    'pan' => ['label' => 'PAN', 'icon' => 'fas fa-id-card'],
                                                    'pan_document' => ['label' => 'PAN Document', 'icon' => 'fas fa-file-pdf'],
                                                    'gst_no' => ['label' => 'GST No', 'icon' => 'fas fa-receipt'],
                                                    'gst_certificate' => ['label' => 'GST Certificate', 'icon' => 'fas fa-file-pdf'],
                                                    'tan_no' => ['label' => 'TAN No', 'icon' => 'fas fa-file-invoice'],
                                                    'tan_document' => ['label' => 'TAN Document', 'icon' => 'fas fa-file-pdf'],
                                                    'partner_name' => ['label' => 'Partner Name', 'icon' => 'fas fa-user'],
                                                    'director_name' => ['label' => 'Director Name', 'icon' => 'fas fa-user-tie'],
                                                    'official_email' => ['label' => 'Email', 'icon' => 'fas fa-envelope'],
                                                    'primary_phone' => ['label' => 'Phone', 'icon' => 'fas fa-phone'],
                                                    'alternate_phone' => ['label' => 'Alternate Phone', 'icon' => 'fas fa-phone-alt'],
                                                    'office_phone' => ['label' => 'Office Phone', 'icon' => 'fas fa-phone-square'],
                                                    'website' => ['label' => 'Website', 'icon' => 'fas fa-globe'],
                                                    'complete_address' => ['label' => 'Address Line', 'icon' => 'fas fa-map-marker-alt'],
                                                    'state' => ['label' => 'State', 'icon' => 'fas fa-map'],
                                                    'district' => ['label' => 'District', 'icon' => 'fas fa-city'],
                                                    'address_city' => ['label' => 'City', 'icon' => 'fas fa-building'],
                                                    'address_pincode' => ['label' => 'PinCode', 'icon' => 'fas fa-location-arrow'],
                                                    'landmark' => ['label' => 'Landmark', 'icon' => 'fas fa-info-circle'],
                                                    'application_status' => ['label' => 'Current Status', 'icon' => 'fas fa-signal', 'badge' => true],
                                                    'submitted_on' => ['label' => 'Submitted On', 'icon' => 'fas fa-calendar-alt'],
                                                    'remarks' => ['label' => 'Remarks', 'icon' => 'fas fa-comment']
                                                ];
                                                @endphp

                                                @foreach ($fields as $key => $field)
                                                <div class="col-md-4 col-sm-6 col-12 detail-field" id="field-{{ $key }}" style="display: none;">
                                                    <div class="p-3 border rounded h-100 bg-white shadow-sm">
                                                        <h6 class="text-muted mb-1">
                                                            <i class="{{ $field['icon'] }} me-1"></i> {{ $field['label'] }}
                                                        </h6>
                                                        <p class="mb-0 fw-semibold">
                                                            <span id="modal-{{ $key }}"></span>
                                                        </p>
                                                    </div>
                                                </div>
                                                @endforeach

                                            </div> {{-- End row --}}
                                        </div> {{-- End card-body (Details) --}}
                                    </div> {{-- End col-lg-12/8 (Details Panel) --}}


                                    {{-- RIGHT PANEL: Status Update Form --}}
                                    {{-- Initial state: col-lg-4 but hidden --}}
                                    <div class="col-lg-4 p-4 border-start transition-width" id="statusUpdatePanel" style="display: none;">
                                        <div class="d-flex justify-content-between align-items-center mb-4">
                                            <h5 class="mb-0">Update Partner Status</h5>
                                            <button type="button" class="btn-close" id="closeStatusPanelBtn" aria-label="Close"></button>
                                        </div>
                                        
                                        <form id="partner-status-form" method="POST">
                                            <input type="hidden" id="modal-partner-id" name="partner_id">
                                            
                                            <div class="row g-3">
                                                <div class="col-12">
                                                    <label for="status-select-modal" class="form-label"><strong>Change Status</strong></label>
                                                    <select class="form-select" id="status-select-modal" name="application_status" required>
                                                        <option value="" disabled selected>Select status</option>
                                                        @foreach ($status as $value)
                                                        <option value="{{ $value->type_code }}" {{ old('application_status') == $value->type_code ? 'selected' : '' }}>
                                                            {{ $value->type_name }}
                                                        </option>
                                                        @endforeach
                                                    </select>
                                                </div>

                                                <div class="col-12">
                                                    <label for="remarks-input-modal" class="form-label"><strong>Remarks</strong></label>
                                                    <textarea class="form-control" id="remarks-input-modal" name="remarks" rows="4" placeholder="Write remarks here..."></textarea>
                                                </div>
                                            </div>

                                            <div class="text-end mt-4">
                                                <button type="submit" class="btn btn-success w-100">Update Status</button>
                                            </div>
                                        </form>
                                    </div> {{-- End col-lg-4 (Right Panel) --}}

                                </div> {{-- End row g-0 --}}
                            </div> {{-- End modal-body --}}

                        </div> {{-- End modal-content --}}
                    </div>
                </div>

@endsection

@section('pages-scripts')
<script>
    $(document).ready(function () {
        
        // Ensure CSRF token is available for AJAX
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        // Initialize DataTable
        const table = $('#partners-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('partner.data.table') }}",
                data: function (d) {
                    d.status = $('#pills-tab .nav-link.active').data('status');
                }
            },
            columns: [
                { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
                { data: 'partner_name', name: 'partner_name' },
                { data: 'organization_type', name: 'organization_type' },
                { data: 'organization_sub_type', name: 'organization_sub_type' },
                { data: 'director_name', name: 'director_name' },
                { data: 'official_email', name: 'official_email' },
                { data: 'primary_phone', name: 'primary_phone' },
                { data: 'application_status', name: 'application_status', orderable: false, searchable: false },
                { data: 'created_at_formatted', name: 'created_at' },
                { data: 'action', name: 'action', orderable: false, searchable: false }
            ],
            order: [[1, 'asc']]
        });

        // Reload table when tab changes
        $('#pills-tab .nav-link').on('shown.bs.tab', function () {
            table.ajax.reload();
        });

        /**
         * Toggles the split-screen layout state.
         * @param {boolean} showSplit - true to show the status panel (split screen - Image 2), false for details only (full width - Image 1).
         */
        function toggleSplitScreen(showSplit) {
            const $detailsPanel = $('#detailsPanel');
            const $statusPanel = $('#statusUpdatePanel');
            const $btn = $('#toggleStatusPanelBtn');
            
            const activeTabStatus = $('#pills-tab .nav-link.active').data('status');
            const isPending = activeTabStatus && activeTabStatus.toUpperCase() === 'PENDING';

            // Only show the header button if the current status is Pending
            $btn.toggle(isPending);

            if (isPending) {
                if (showSplit) {
                    // State 2: Split screen (8/4)
                    $detailsPanel.removeClass('col-lg-12').addClass('col-lg-8');
                    $statusPanel.show(); // Show the panel
                    $btn.hide(); // Hide the button once the panel is open
                } else {
                    // State 1: Details only (12/0)
                    $detailsPanel.removeClass('col-lg-8').addClass('col-lg-12');
                    $statusPanel.hide(); // Hide the panel
                    $btn.show(); // Show the button when panel is closed (for re-opening)
                }
            } else {
                 // If not pending, ensure the details panel is full width and the button/status panel are hidden
                $detailsPanel.removeClass('col-lg-8').addClass('col-lg-12');
                $statusPanel.hide();
                $btn.hide();
            }
        }
        
        // --- Event Handlers ---

        // Initial state when modal is opened: Details only (full width)
        $('#partnerDetailsModal').on('show.bs.modal', function () {
             toggleSplitScreen(false); // Show details only (Image 1 state)
        });

        // Button to show the status panel (in the modal header)
        $('#toggleStatusPanelBtn').on('click', function () {
            toggleSplitScreen(true); // Show split screen (Image 2 state)
        });

        // Button to hide the status panel (inside the status panel)
        $('#closeStatusPanelBtn').on('click', function () {
             toggleSplitScreen(false); // Go back to details only (Image 1 state)
        });


        // View Partner Details (Data Loading)
        $('#partners-table').on('click', '.view-partner', function () {
            const partnerId = $(this).data('id');
            const url = "{{ route('partner.show', ['id' => 'IDPLACEHOLDER']) }}".replace('IDPLACEHOLDER', partnerId);
            
            // Reset form and panel state before fetching new data
            $('#partner-status-form')[0].reset();
            // Start in State 1 (Details Only)
            toggleSplitScreen(false);

            $.ajax({
                url: url,
                type: 'GET',
                dataType: 'json',
                success: function (data) {
                    const partner = data.partner || {};
                    const address = data.address || {};

                    $('#modal-partner-id').val(partner.id);
                    $('#modal-partner_name_title').text(partner.partner_name || 'N/A'); // Set title

                    const allFields = [
                        'partner_name','organization_type', 'organization_sub_type', 'darpan_id','registration_no',
                        'tan_no','gst_no','pan','director_name','official_email',
                        'primary_phone','alternate_phone','office_phone','website',
                        'year_established','application_status','complete_address',
                        'state','district','address_city','address_pincode','landmark',
                        'remarks','registration_certificate','pan_document',
                        'gst_certificate','tan_document','submitted_on'
                    ];

                    allFields.forEach(function (key) {
                        let value;

                        if (['complete_address','state','district','address_city','address_pincode','landmark'].includes(key)) {
                            value = address[key] || '';
                        } else {
                            value = partner[key] || '';
                        }

                        const $modalKey = $('#modal-' + key);
                        const $fieldKey = $('#field-' + key);

                        if (value) {
                            if (['registration_certificate', 'tan_document', 'gst_certificate', 'pan_document'].includes(key)) {
                                $modalKey.html(`<a href="${value}" target="_blank" class="text-primary fw-bold">View Document <i class="fas fa-external-link-alt ms-1"></i></a>`);
                            } else if (key === 'application_status') {
                                let status = value || 'N/A';
                                let badgeClass = 'bg-secondary';
                                switch (status.toLowerCase()) {
                                    case 'approved': badgeClass = 'bg-success'; break;
                                    case 'rejected': badgeClass = 'bg-danger'; break;
                                    case 'in progress': badgeClass = 'bg-primary'; break;
                                    case 'pending': badgeClass = 'bg-warning text-dark'; break;
                                    default: badgeClass = 'bg-secondary';
                                }
                                $modalKey.html(`<span class="badge ${badgeClass} px-3 py-2 fs-6">${status.toUpperCase()}</span>`);
                            } else {
                                $modalKey.text(value);
                            }
                            $fieldKey.show();
                        } else {
                            $fieldKey.hide();
                        }
                    });

                    // Call toggleSplitScreen again to ensure correct button visibility based on the fetched partner's status/tab
                    const activeTabStatus = $('#pills-tab .nav-link.active').data('status');
                    const isPending = activeTabStatus && activeTabStatus.toUpperCase() === 'PENDING';
                    $('#toggleStatusPanelBtn').toggle(isPending); 
                    
                    $('#partnerDetailsModal').modal('show');
                },
                error: function (xhr) {
                    console.error('Failed to load partner details:', xhr.responseText);
                }
            });
        });

        // AJAX Submit Status Update
        $('#partner-status-form').on('submit', function (e) {
            e.preventDefault();

            const partnerId = $('#modal-partner-id').val();
            const status = $('#status-select-modal').val();
            const remarks = $('#remarks-input-modal').val();
            const partnerName = $('#modal-partner_name_title').text();
            const url = "{{ route('partner.updateStatus', ['id' => 'IDPLACEHOLDER']) }}".replace('IDPLACEHOLDER', partnerId);

            if (!partnerId) {
                 Swal.fire({ icon: 'error', title: 'Missing ID', text: 'Partner ID is missing. Please try again.' });
                 return;
             }

             if (!status) {
                 Swal.fire({ icon: 'warning', title: 'Select Status', text: 'Please select a status before updating.' });
                 return;
             }

            Swal.fire({
                title: 'Are you sure?',
                html: `You are about to change the status of <strong>${partnerName}</strong> to <strong>${status}</strong>.`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, update it!',
                cancelButtonText: 'Cancel'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: url,
                        method: 'POST',
                        data: {
                            id: partnerId,
                            application_status: status,
                            remarks: remarks,
                        },
                        success: function (response) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Updated!',
                                text: response.message || 'Status updated successfully.',
                                timer: 2000,
                                showConfirmButton: true
                            });

                            setTimeout(() => {
                                // Hide the main details modal
                                $('#partnerDetailsModal').modal('hide'); 
                                // Reload DataTable to show updated status
                                table.ajax.reload(null, false);
                            }, 1500);
                        },
                        error: function (xhr) {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: xhr.responseJSON?.message || 'Failed to update status.'
                            });
                            console.error(xhr.responseText);
                        }
                    });
                }
            });
        });

    });
</script>
@endsection