@extends('layouts.auth.app')

@section('title', 'TCC Request Details')

@section('content')
<div class="space-y-6">
    <!-- Header with Back Button -->
    <div class="flex items-center justify-between">
        <div class="flex items-center space-x-4">
            <a href="{{ route('process-tcc-request.list') }}" class="inline-flex items-center text-gray-600 hover:text-gray-900 transition-colors">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                </svg>
                Back to List
            </a>
        </div>
        @if($requestData->StatusID == 3 || $requestData->StatusID == 11)
        <div class="flex items-center space-x-3">
            <a href="{{ route('process-tcc-request.download', $requestData->TCCRequestID) }}" class="inline-flex items-center px-4 py-2 bg-blue-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-blue-700 transition-colors">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                </svg>
                Download TCC
            </a>
            <button onclick="openRevokeModal()" class="inline-flex items-center px-4 py-2 bg-red-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-red-700 transition-colors">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
                </svg>
                Revoke TCC
            </button>
        </div>
        @endif
    </div>

    <!-- Request Information Card -->
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
            <div class="flex items-center justify-between">
                <h3 class="text-lg font-semibold text-gray-900">TCC Request Information</h3>
                @php
                    $statusColors = [
                        1 => 'bg-yellow-100 text-yellow-800',
                        2 => 'bg-blue-100 text-blue-800',
                        3 => 'bg-green-100 text-green-800',
                        4 => 'bg-red-100 text-red-800',
                        5 => 'bg-gray-100 text-gray-800',
                        9 => 'bg-yellow-100 text-yellow-800',
                        11 => 'bg-green-100 text-green-800',
                        15 => 'bg-red-100 text-red-800'
                    ];
                    $statusColor = $statusColors[$requestData->StatusID] ?? 'bg-gray-100 text-gray-800';
                @endphp
                <span class="px-3 py-1 text-sm font-medium rounded-full {{ $statusColor }}">
                    {{ $requestData->StatusName ?? 'Unknown' }}
                </span>
            </div>
        </div>

        <div class="px-6 py-4">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <div>
                    <label class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">Request Ref No</label>
                    <p class="text-sm font-semibold text-gray-900">{{ $requestData->RequestRefNo ?? 'N/A' }}</p>
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">Tax Year</label>
                    <p class="text-sm font-semibold text-gray-900">{{ $requestData->TaxYear ?? 'N/A' }}</p>
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">Request Date</label>
                    <p class="text-sm font-semibold text-gray-900">{{ $requestData->RequestDate ? \Carbon\Carbon::parse($requestData->RequestDate)->format('d-M-Y') : 'N/A' }}</p>
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">Tax Office</label>
                    <p class="text-sm font-semibold text-gray-900">{{ $requestData->TaxOfficeName ?? 'N/A' }}</p>
                </div>
            </div>

            <div class="border-t border-gray-200 mt-4 pt-4">
                <h4 class="text-sm font-semibold text-gray-700 mb-3">Tax Payer Information</h4>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                    <div>
                        <label class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">Name</label>
                        <p class="text-sm font-semibold text-gray-900">{{ $requestData->TaxPayerName ?? 'N/A' }}</p>
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">RIN</label>
                        <p class="text-sm font-semibold text-gray-900">{{ $requestData->TaxPayerRIN ?? 'N/A' }}</p>
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">TIN</label>
                        <p class="text-sm font-semibold text-gray-900">{{ $requestData->TIN ?? 'N/A' }}</p>
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">Mobile Number</label>
                        <p class="text-sm font-semibold text-gray-900">{{ $requestData->MobileNumber ?? 'N/A' }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Processing Stages Card -->
    @if($requestData->StatusID != 15)
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
            <h3 class="text-lg font-semibold text-gray-900">Processing Stages</h3>
            <p class="text-sm text-gray-500 mt-1">Complete each stage to process the TCC request</p>
        </div>

        <div class="px-6 py-4">
            <div class="relative">
                <!-- Progress Line -->
                <div class="absolute left-4 top-0 bottom-0 w-0.5 bg-gray-200"></div>

                <div class="space-y-4">
                    @foreach($requestStageList as $index => $stage)
                    @php
                        $isCompleted = $stage->IsCompleted ?? false;
                        $isEnabled = $stage->IsEnabled ?? false;
                        $isCurrent = !$isCompleted && $isEnabled;
                    @endphp
                    <div class="relative flex items-start">
                        <!-- Stage Indicator -->
                        <div class="relative z-10 flex items-center justify-center w-8 h-8 rounded-full border-2 {{ $isCompleted ? 'bg-green-500 border-green-500' : ($isCurrent ? 'bg-teal-500 border-teal-500' : 'bg-white border-gray-300') }}">
                            @if($isCompleted)
                            <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                            </svg>
                            @else
                            <span class="text-xs font-semibold {{ $isCurrent ? 'text-white' : 'text-gray-500' }}">{{ $stage->StageID }}</span>
                            @endif
                        </div>

                        <!-- Stage Content -->
                        <div class="ml-4 flex-1 min-w-0">
                            <div class="flex items-center justify-between">
                                <div>
                                    <h4 class="text-sm font-medium {{ $isCompleted ? 'text-green-700' : ($isCurrent ? 'text-teal-700' : 'text-gray-700') }}">
                                        {{ $stage->StageName }}
                                    </h4>
                                    @if($isCompleted && isset($stage->ApprovalDate))
                                    <p class="text-xs text-gray-500 mt-0.5">
                                        Completed on {{ \Carbon\Carbon::parse($stage->ApprovalDate)->format('d-M-Y H:i') }}
                                    </p>
                                    @endif
                                </div>

                                <div>
                                    @if($isCompleted)
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                        Completed
                                    </span>
                                    @elseif($isCurrent)
                                    <a href="{{ $stage->RouteUrl }}" class="inline-flex items-center px-3 py-1.5 bg-teal-600 border border-transparent rounded-md text-xs font-medium text-white hover:bg-teal-700 transition-colors">
                                        Process
                                        <svg class="ml-1.5 w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                                        </svg>
                                    </a>
                                    @else
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-500">
                                        Pending
                                    </span>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
    @endif

    <!-- Notes Section -->
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
            <div class="flex items-center justify-between">
                <h3 class="text-lg font-semibold text-gray-900">Notes & Comments</h3>
                <button onclick="openAddNotesModal()" class="inline-flex items-center px-3 py-1.5 bg-teal-600 border border-transparent rounded-md text-xs font-medium text-white hover:bg-teal-700 transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                    </svg>
                    Add Note
                </button>
            </div>
        </div>

        <div class="px-6 py-4">
            @if(count($requestNotesList) > 0)
            <div class="space-y-4">
                @foreach($requestNotesList as $note)
                <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
                    <div class="flex items-start justify-between">
                        <div class="flex-1">
                            <p class="text-sm text-gray-700">{{ $note->Notes }}</p>
                        </div>
                    </div>
                    <div class="mt-2 flex items-center text-xs text-gray-500">
                        <span class="font-medium">{{ $note->FirstName ?? '' }} {{ $note->LastName ?? '' }}</span>
                        <span class="mx-2">&middot;</span>
                        <span>{{ \Carbon\Carbon::parse($note->CreatedDate)->format('d-M-Y H:i') }}</span>
                    </div>
                </div>
                @endforeach
            </div>
            @else
            <div class="text-center py-6">
                <svg xmlns="http://www.w3.org/2000/svg" class="mx-auto h-12 w-12 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
                </svg>
                <p class="mt-2 text-sm text-gray-500">No notes yet</p>
            </div>
            @endif
        </div>
    </div>
</div>

<!-- Add Notes Modal -->
<div id="addNotesModal" class="hidden fixed inset-0 z-50 overflow-y-auto">
    <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" onclick="closeAddNotesModal()"></div>
        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
            <div class="bg-white px-6 py-4 border-b border-gray-200">
                <div class="flex items-center justify-between">
                    <h3 class="text-lg font-semibold text-gray-900">Add Note</h3>
                    <button onclick="closeAddNotesModal()" class="text-gray-400 hover:text-gray-600 transition-colors">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M18 6L6 18M6 6l12 12"/>
                        </svg>
                    </button>
                </div>
            </div>

            <div id="addNotesModalError" class="hidden mx-6 mt-4 p-3 bg-red-50 border border-red-200 text-red-700 rounded-lg text-sm"></div>

            <form id="addNotesForm">
                @csrf
                <div class="bg-white px-6 py-4">
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">Note <span class="text-red-500">*</span></label>
                        <textarea id="noteText" name="Notes" rows="4" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500" placeholder="Enter your note..." required></textarea>
                    </div>
                </div>

                <div class="bg-gray-50 px-6 py-4 flex justify-end space-x-3">
                    <button type="button" onclick="closeAddNotesModal()" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">Cancel</button>
                    <button type="submit" id="btnSaveNote" class="px-4 py-2 text-sm font-medium text-white bg-teal-600 rounded-lg hover:bg-teal-700 transition-colors">
                        Save Note
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Revoke Modal -->
<div id="revokeModal" class="hidden fixed inset-0 z-50 overflow-y-auto">
    <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" onclick="closeRevokeModal()"></div>
        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
            <div class="bg-white px-6 py-4 border-b border-gray-200">
                <div class="flex items-center justify-between">
                    <h3 class="text-lg font-semibold text-gray-900">Revoke TCC</h3>
                    <button onclick="closeRevokeModal()" class="text-gray-400 hover:text-gray-600 transition-colors">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M18 6L6 18M6 6l12 12"/>
                        </svg>
                    </button>
                </div>
            </div>

            <div id="revokeModalError" class="hidden mx-6 mt-4 p-3 bg-red-50 border border-red-200 text-red-700 rounded-lg text-sm"></div>

            <form id="revokeForm">
                @csrf
                <input type="hidden" id="revokeRequestId" name="RequestId" value="{{ $requestData->TCCRequestID }}">
                <div class="bg-white px-6 py-4">
                    <div class="mb-4 p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
                        <div class="flex">
                            <svg class="h-5 w-5 text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                            </svg>
                            <p class="ml-3 text-sm text-yellow-700">
                                This action will permanently revoke this TCC. This action cannot be undone.
                            </p>
                        </div>
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">Reason for Revocation <span class="text-red-500">*</span></label>
                        <textarea id="revokeReason" name="Reason" rows="4" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500" placeholder="Enter reason for revoking this TCC..." required></textarea>
                    </div>
                </div>

                <div class="bg-gray-50 px-6 py-4 flex justify-end space-x-3">
                    <button type="button" onclick="closeRevokeModal()" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">Cancel</button>
                    <button type="submit" id="btnRevoke" class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700 transition-colors">
                        Revoke TCC
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Add Notes Form
    $('#addNotesForm').on('submit', function(e) {
        e.preventDefault();

        const notes = $('#noteText').val();
        if (!notes || notes.trim() === '') {
            $('#addNotesModalError').text('Please enter a note').removeClass('hidden');
            return;
        }

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

        $.ajax({
            url: '{{ route("process-tcc-request.add-notes", $requestData->TCCRequestID) }}',
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                Notes: notes
            },
            success: function(response) {
                $('#btnSaveNote').prop('disabled', false).text('Save Note');

                if (response.success) {
                    closeAddNotesModal();
                    location.reload();
                } else {
                    $('#addNotesModalError').text(response.message || 'Failed to save note').removeClass('hidden');
                }
            },
            error: function(xhr) {
                $('#btnSaveNote').prop('disabled', false).text('Save Note');
                let errorMsg = 'Error saving note';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMsg = xhr.responseJSON.message;
                }
                $('#addNotesModalError').text(errorMsg).removeClass('hidden');
            }
        });
    });

    // Revoke Form
    $('#revokeForm').on('submit', function(e) {
        e.preventDefault();

        const reason = $('#revokeReason').val();
        if (!reason || reason.trim() === '') {
            $('#revokeModalError').text('Please enter a reason for revocation').removeClass('hidden');
            return;
        }

        $('#btnRevoke').prop('disabled', true).text('Revoking...');

        $.ajax({
            url: '{{ route("process-tcc-request.revoke") }}',
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                RequestId: $('#revokeRequestId').val(),
                Reason: reason
            },
            success: function(response) {
                $('#btnRevoke').prop('disabled', false).text('Revoke TCC');

                if (response.success) {
                    closeRevokeModal();
                    location.reload();
                } else {
                    $('#revokeModalError').text(response.message || 'Failed to revoke TCC').removeClass('hidden');
                }
            },
            error: function(xhr) {
                $('#btnRevoke').prop('disabled', false).text('Revoke TCC');
                let errorMsg = 'Error revoking TCC';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMsg = xhr.responseJSON.message;
                }
                $('#revokeModalError').text(errorMsg).removeClass('hidden');
            }
        });
    });

    // Modal Functions
    window.openAddNotesModal = function() {
        $('#noteText').val('');
        $('#addNotesModalError').addClass('hidden');
        $('#addNotesModal').removeClass('hidden');
    };

    window.closeAddNotesModal = function() {
        $('#addNotesModal').addClass('hidden');
    };

    window.openRevokeModal = function() {
        $('#revokeReason').val('');
        $('#revokeModalError').addClass('hidden');
        $('#revokeModal').removeClass('hidden');
    };

    window.closeRevokeModal = function() {
        $('#revokeModal').addClass('hidden');
    };
});
</script>
@endpush