@extends('layouts.app')

@section('content')
<div class="page-wrapper">
    <div class="page-content">
	        <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
	            <div class="ps-3">
	                <nav aria-label="breadcrumb">
	                    <ol class="breadcrumb mb-0 p-0">
	                        <li class="breadcrumb-item"><a href="javascript:;"><i class="bx bx-home-alt"></i></a></li>
	                        <li class="breadcrumb-item active" aria-current="page">KYC Slots</li>
	                    </ol>
	                </nav>
	            </div>
	            <div class="ms-auto">
	                <a href="{{ route('kycSlots.create') }}" class="btn btn-primary">Create Slot</a>
	            </div>
	        </div>

        <hr />

        {{-- @if(!empty($selectedUserId))
            <div class="alert alert-info py-2">
                Showing KYC slots for selected user only.
                <a href="{{ route('kycSlots.index') }}" class="ms-2">Show all</a>
            </div>
        @endif --}}

        <div class="card">
            <div class="card-body">
                <h6 class="mb-3">KYC Slot List</h6>
                <div class="table-responsive">
	                    <table id="kyc-slots-table" class="table table-striped table-bordered" style="width:100%">
	                        <thead>
	                            <tr>
	                                <th>#</th>
	                                <th>User</th>
	                                <th>Slot Date</th>
	                                <th>Meeting</th>
	                                <th>Assigned Admin</th>
	                                <th>Status</th>
	                                <th>Created At</th>
	                                <th>Action</th>
	                            </tr>
	                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@php
    $shouldOpenRescheduleModal = old('open_reschedule_modal') === '1' && $errors->any();
    $shouldOpenRejectModal = old('open_reject_modal') === '1' && $errors->any();
@endphp

<div class="modal fade" id="rescheduleSlotModal" tabindex="-1" aria-labelledby="rescheduleSlotModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="rescheduleSlotModalLabel">Create New KYC Slot</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST" action="{{ route('kycSlots.store') }}" id="reschedule-slot-form">
                @csrf
                <input type="hidden" name="open_reschedule_modal" value="1">
                <input type="hidden" name="user_id" id="reschedule_user_id" value="{{ old('user_id') }}">
                <input type="hidden" name="rescheduled_slot_id" id="rescheduled_slot_id" value="{{ old('rescheduled_slot_id') }}">
                <input type="hidden" name="status" value="pending">
                <input type="hidden" name="reschedule_user_label" id="reschedule_user_label" value="{{ old('reschedule_user_label') }}">
                @if (!empty($selectedUserId))
                    <input type="hidden" name="redirect_user_id" id="reschedule_redirect_user_id" value="{{ old('redirect_user_id', $selectedUserId) }}">
                @endif

                <div class="modal-body">
                    <div class="alert alert-info py-2 mb-3">
                        Create the new slot first. After submit, the previous slot will be marked as rescheduled.
                    </div>

                    <div class="mb-3">
                        <label for="reschedule_user_display" class="form-label">User</label>
                        <input
                            type="text"
                            id="reschedule_user_display"
                            class="form-control"
                            value="{{ old('reschedule_user_label') }}"
                            readonly
                        >
                        @error('user_id')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="reschedule_assigned_to" class="form-label">Assigned Admin</label>
                        <select
                            id="reschedule_assigned_to"
                            name="assigned_to"
                            class="form-select @error('assigned_to') is-invalid @enderror"
                        >
                            <option value="">Unassigned</option>
                            @foreach ($admins as $admin)
                                <option value="{{ $admin->id }}" {{ (string) old('assigned_to') === (string) $admin->id ? 'selected' : '' }}>
                                    {{ $admin->name ?? $admin->email }}
                                </option>
                            @endforeach
                        </select>
                        @error('assigned_to')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="reschedule_slot_date" class="form-label">Slot Date &amp; Time <span class="text-danger">*</span></label>
                        <input
                            type="datetime-local"
                            id="reschedule_slot_date"
                            name="slot_date"
                            class="form-control @error('slot_date') is-invalid @enderror"
                            value="{{ old('slot_date', now()->format('Y-m-d\\TH:i')) }}"
                            required
                        >
                        @error('slot_date')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="reschedule_meeting" class="form-label">Meeting Link</label>
                        <input
                            type="text"
                            id="reschedule_meeting"
                            name="meeting"
                            class="form-control @error('meeting') is-invalid @enderror"
                            value="{{ old('meeting') }}"
                            placeholder="https://meet.google.com/..."
                        >
                        @error('meeting')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-0">
                        <label for="reschedule_remark" class="form-label">Remark</label>
                        <textarea
                            id="reschedule_remark"
                            name="remark"
                            class="form-control @error('remark') is-invalid @enderror"
                            rows="4"
                            placeholder="Remark (optional)"
                        >{{ old('remark') }}</textarea>
                        @error('remark')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <small class="text-muted d-block mt-2">New slot will be created with pending status.</small>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Create Slot</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="rejectSlotModal" tabindex="-1" aria-labelledby="rejectSlotModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="rejectSlotModalLabel">Reject KYC Slot</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST" action="{{ old('reject_status_update_url', route('kycSlots.index')) }}" id="reject-slot-form">
                @csrf
                @method('PATCH')
                <input type="hidden" name="open_reject_modal" value="1">
                <input type="hidden" name="status" value="rejected">
                <input type="hidden" name="reject_user_label" id="reject_user_label" value="{{ old('reject_user_label') }}">
                <input type="hidden" name="reject_status_update_url" id="reject_status_update_url" value="{{ old('reject_status_update_url') }}">

                <div class="modal-body">
                    <div class="alert alert-warning py-2 mb-3">
                        Add a remark first. After submit, this slot will be marked as rejected.
                    </div>

                    <div class="mb-3">
                        <label for="reject_user_display" class="form-label">User</label>
                        <input
                            type="text"
                            id="reject_user_display"
                            class="form-control"
                            value="{{ old('reject_user_label') }}"
                            readonly
                        >
                    </div>

                    <div class="mb-0">
                        <label for="reject_remark" class="form-label">Remark <span class="text-danger">*</span></label>
                        <textarea
                            id="reject_remark"
                            name="remark"
                            class="form-control @error('remark') is-invalid @enderror"
                            rows="4"
                            placeholder="Enter rejection remark"
                            required
                        >{{ old('remark') }}</textarea>
                        @error('remark')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-danger">Reject Slot</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="updateMeetingModal" tabindex="-1" aria-labelledby="updateMeetingModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="updateMeetingModalLabel">Update Meeting Link</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="update-meeting-form">
                <input type="hidden" id="meeting_slot_id">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="meeting_link_input" class="form-label">Meeting Link</label>
                        <input
                            type="text"
                            id="meeting_link_input"
                            class="form-control"
                            placeholder="https://meet.google.com/..."
                        >
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary" id="save-meeting-btn">Save Link</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="kycSlotDetailsModal" tabindex="-1" aria-labelledby="kycSlotDetailsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" id="kyc-slot-details-modal-content">
            <!-- Rendered HTML from blade will be injected here via AJAX -->
        </div>
    </div>
</div>

<script>
$(function () {
    const selectedUserId = @json($selectedUserId ?? null);
    const statusUpdateUrlTemplate = "{{ route('kycSlots.updateStatus', ['kycSlot' => '__ID__']) }}";
    const meetingUpdateUrlTemplate = "{{ route('kycSlots.updateMeeting', ['kycSlot' => '__ID__']) }}";
    const showModalUrlTemplate = "{{ route('kycSlots.showModal', ['kycSlot' => '__ID__']) }}";
    const csrfToken = "{{ csrf_token() }}";
    const rescheduleModalEl = document.getElementById('rescheduleSlotModal');
    const rescheduleForm = document.getElementById('reschedule-slot-form');
    const rejectModalEl = document.getElementById('rejectSlotModal');
    const rejectForm = document.getElementById('reject-slot-form');
    const rescheduleUserIdInput = document.getElementById('reschedule_user_id');
    const rescheduledSlotIdInput = document.getElementById('rescheduled_slot_id');
    const rescheduleUserLabelInput = document.getElementById('reschedule_user_label');
    const rescheduleUserDisplayInput = document.getElementById('reschedule_user_display');
    const rescheduleRedirectUserIdInput = document.getElementById('reschedule_redirect_user_id');
    const rejectUserLabelInput = document.getElementById('reject_user_label');
    const rejectUserDisplayInput = document.getElementById('reject_user_display');
    const rejectStatusUpdateUrlInput = document.getElementById('reject_status_update_url');

    function openRescheduleModal(slotId, userId, userLabel, assignedTo, meetingLink) {
        if (!rescheduleModalEl || !rescheduleForm || !slotId || !userId) {
            return;
        }

        rescheduleForm.reset();

        const normalizedLabel = userLabel || `User #${userId}`;
        rescheduledSlotIdInput.value = slotId;
        rescheduleUserIdInput.value = userId;
        rescheduleUserLabelInput.value = normalizedLabel;
        rescheduleUserDisplayInput.value = normalizedLabel;

        const assignedSelect = document.getElementById('reschedule_assigned_to');
        if (assignedSelect) {
            assignedSelect.value = assignedTo || '';
        }

        const meetingInput = document.getElementById('reschedule_meeting');
        if (meetingInput) {
            meetingInput.value = meetingLink || '';
        }

        if (rescheduleRedirectUserIdInput) {
            rescheduleRedirectUserIdInput.value = selectedUserId || '';
        }

        if (typeof bootstrap !== 'undefined') {
            bootstrap.Modal.getOrCreateInstance(rescheduleModalEl).show();
        }
    }

    function openRejectModal(slotId, userLabel) {
        if (!rejectModalEl || !rejectForm || !slotId) {
            return;
        }

        rejectForm.reset();

        const normalizedLabel = userLabel || `Slot #${slotId}`;
        const statusUpdateUrl = statusUpdateUrlTemplate.replace('__ID__', slotId);
        rejectForm.action = statusUpdateUrl;
        rejectUserLabelInput.value = normalizedLabel;
        rejectUserDisplayInput.value = normalizedLabel;
        rejectStatusUpdateUrlInput.value = statusUpdateUrl;

        if (typeof bootstrap !== 'undefined') {
            bootstrap.Modal.getOrCreateInstance(rejectModalEl).show();
        }
    }

    const table = $('#kyc-slots-table').DataTable({
        processing: true,
        serverSide: true,
        order: [[5, 'desc']],
        ajax: {
            url: "{{ route('kycSlots.index') }}",
            data: function (d) {
                if (selectedUserId) {
                    d.user_id = selectedUserId;
                }
            }
        },
        columns: [
            { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
            { data: 'user_info', name: 'user_info', orderable: false, searchable: false },
            { data: 'slot_date', name: 'slot_date' },
            { data: 'meeting', name: 'meeting', orderable: false, searchable: false },
            { data: 'assigned_admin', name: 'assigned_to', orderable: false, searchable: false },
            { data: 'status_badge', name: 'status', orderable: false, searchable: false },
            { data: 'created_at', name: 'created_at' },
            { data: 'action', name: 'action', orderable: false, searchable: false },
        ]
    });

    $(document).on('change', '.kyc-slot-status-select', function () {
        const $select = $(this);
        const slotId = $select.data('id');
        const action = $select.val();

        if (!slotId || !action) {
            return;
        }

        if (action === 'rescheduled') {
            const previousStatus = $select.data('current-status') || '';
            $select.val(previousStatus);
            openRescheduleModal(
                slotId, 
                $select.data('user-id'), 
                $select.data('user-label'),
                $select.attr('data-assigned-to') || '',
                $select.attr('data-meeting') || ''
            );
            return;
        }

        if (action === 'rejected') {
            const previousStatus = $select.data('current-status') || '';
            $select.val(previousStatus);
            openRejectModal(slotId, $select.data('user-label'));
            return;
        }

        $select.prop('disabled', true);
        const statusUpdateUrl = statusUpdateUrlTemplate.replace('__ID__', slotId);

        $.ajax({
            url: statusUpdateUrl,
            type: 'PATCH',
            data: {
                _token: csrfToken,
                status: action
            },
            success: function (res) {
                if (typeof toastr !== 'undefined') {
                    toastr.success(res.message || 'KYC slot status updated successfully.');
                }

                $select.data('current-status', action);
                $select.attr('data-current-status', action);

                table.ajax.reload(null, false);
            },
            error: function (xhr) {
                const message = xhr.responseJSON?.message || 'KYC slot status update failed.';

                if (typeof toastr !== 'undefined') {
                    toastr.error(message);
                } else {
                    alert(message);
                }

                table.ajax.reload(null, false);
            },
            complete: function () {
                $select.prop('disabled', false);
            }
        });
    });

    $(document).on('click', '.edit-meeting-btn', function () {
        const slotId = $(this).data('id');
        const currentMeeting = $(this).data('meeting') || '';

        $('#meeting_slot_id').val(slotId);
        $('#meeting_link_input').val(currentMeeting);

        const modalEl = document.getElementById('updateMeetingModal');
        if (modalEl && typeof bootstrap !== 'undefined') {
            bootstrap.Modal.getOrCreateInstance(modalEl).show();
        }
    });

    $('#update-meeting-form').on('submit', function (e) {
        e.preventDefault();

        const slotId = $('#meeting_slot_id').val();
        const meetingLink = $('#meeting_link_input').val();
        const $btn = $('#save-meeting-btn');

        if (!slotId) return;

        $btn.prop('disabled', true).text('Saving...');

        const updateUrl = meetingUpdateUrlTemplate.replace('__ID__', slotId);

        $.ajax({
            url: updateUrl,
            type: 'PATCH',
            data: {
                _token: csrfToken,
                meeting: meetingLink
            },
            success: function (res) {
                if (typeof toastr !== 'undefined') {
                    toastr.success(res.message || 'Meeting link updated successfully.');
                }
                const modalEl = document.getElementById('updateMeetingModal');
                if (modalEl && typeof bootstrap !== 'undefined') {
                    bootstrap.Modal.getOrCreateInstance(modalEl).hide();
                }
                table.ajax.reload(null, false);
            },
            error: function (xhr) {
                const message = xhr.responseJSON?.message || 'Failed to update meeting link.';
                if (typeof toastr !== 'undefined') {
                    toastr.error(message);
                } else {
                    alert(message);
                }
            },
            complete: function () {
                $btn.prop('disabled', false).text('Save Link');
            }
        });
    });

    $(document).on('click', '.view-details-btn', function () {
        const slotId = $(this).data('id');
        if (!slotId) return;

        const url = showModalUrlTemplate.replace('__ID__', slotId);

        $('#kyc-slot-details-modal-content').html(`
            <div class="modal-body text-center py-4">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
                <div class="mt-2 text-muted">Loading details...</div>
            </div>
        `);

        const modalEl = document.getElementById('kycSlotDetailsModal');
        if (modalEl && typeof bootstrap !== 'undefined') {
            bootstrap.Modal.getOrCreateInstance(modalEl).show();
        }

        $.ajax({
            url: url,
            type: 'GET',
            success: function (html) {
                $('#kyc-slot-details-modal-content').html(html);
            },
            error: function () {
                $('#kyc-slot-details-modal-content').html(`
                    <div class="modal-header bg-danger text-white">
                        <h5 class="modal-title">Error</h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body text-center text-danger py-4">
                        <i class="bx bx-error-circle" style="font-size: 3rem;"></i>
                        <div class="mt-2 fw-semibold">Failed to load KYC slot details. Please try again.</div>
                    </div>
                `);
            }
        });
    });
});
</script>

@if($shouldOpenRescheduleModal)
<script>
document.addEventListener('DOMContentLoaded', function () {
    const modalEl = document.getElementById('rescheduleSlotModal');

    if (modalEl && typeof bootstrap !== 'undefined') {
        bootstrap.Modal.getOrCreateInstance(modalEl).show();
    }
});
</script>
@endif

@if($shouldOpenRejectModal)
<script>
document.addEventListener('DOMContentLoaded', function () {
    const modalEl = document.getElementById('rejectSlotModal');

    if (modalEl && typeof bootstrap !== 'undefined') {
        bootstrap.Modal.getOrCreateInstance(modalEl).show();
    }
});
</script>
@endif
@endsection