@extends('layouts.auth.app')

@section('title', 'My Operations - Sign eTCC Bulk')

@section('content')
<form id="requestForm" method="POST" action="{{ route('staff.sign-tcc-process-bulk') }}">
    @csrf
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
        <!-- Header -->
        <div class="px-6 py-4 border-b border-gray-200">
            <div class="flex items-center justify-between">
                <div>
                    <h3 class="text-lg font-semibold text-gray-900">My Operations - Sign eTCC Bulk</h3>
                    <p class="text-sm text-gray-500 mt-1">Select and sign multiple Tax Clearance Certificates at once</p>
                </div>
                <button type="submit" id="submitButton" style="display: none;" class="flex items-center space-x-2 px-4 py-2 bg-green-600 text-white text-sm font-medium rounded-lg hover:bg-green-700 transition-colors duration-200">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M20 6L9 17l-5-5"/>
                    </svg>
                    <span>Sign All</span>
                </button>
            </div>
        </div>

        <!-- Loading State -->
        <div id="divLoader" style="display:none;" class="px-6 py-12 text-center">
            <div class="inline-flex items-center space-x-3">
                <svg class="animate-spin h-8 w-8 text-teal-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
                <h2 class="text-lg font-medium text-gray-900">Please hold, your request is being processed.</h2>
            </div>
        </div>

        <div id="divLoaderPage">
            <!-- Alert Messages -->
            @if($message)
            <div class="mx-6 mt-4">
                <div class="bg-red-50 border border-red-200 rounded-lg p-4">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <svg class="h-5 w-5 text-red-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
                            </svg>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm text-red-800">{{ $message }}</p>
                        </div>
                    </div>
                </div>
            </div>
            @endif

            @if(session('success'))
            <div class="mx-6 mt-4">
                <div class="bg-green-50 border border-green-200 rounded-lg p-4">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <svg class="h-5 w-5 text-green-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                            </svg>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm text-green-800">{{ session('success') }}</p>
                        </div>
                    </div>
                </div>
            </div>
            @endif

            <!-- Table -->
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200" id="tblNewRequest">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">SN</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Request Ref</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tax Payer Name</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Mobile Number</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Request Date</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tax Year</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Bill Status</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                <div class="flex items-center space-x-2">
                                    <span>Check All</span>
                                    <input type="checkbox" id="checkAll" class="h-4 w-4 text-teal-600 focus:ring-teal-500 border-gray-300 rounded">
                                </div>
                            </th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        {{-- @if(count($tccList) > 0) --}}
                            @foreach($tccList as $item)
                            <tr class="bg-white hover:bg-gray-50 transition-colors">
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ $item->TaxPayerID }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $item->RequestRefNo }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $item->TaxFName }} {{ $item->TaxLName }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $item->MobileNumber }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ \Carbon\Carbon::parse($item->RequestDate)->format('d/m/Y') }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $item->TaxYear }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full
                                        @if(str_contains($item->BillStatus, 'Signed Successfully')) bg-green-100 text-green-800
                                        @elseif(str_contains($item->BillStatus, 'Awaiting')) bg-yellow-100 text-yellow-800
                                        @else bg-gray-100 text-gray-800
                                        @endif">
                                        {{ $item->BillStatus }}
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    <input type="checkbox" class="rowCheckbox h-4 w-4 text-teal-600 focus:ring-teal-500 border-gray-300 rounded" name="selectedIds[]" value="{{ $item->TCCRequestID }}">
                                </td>
                            </tr>
                            @endforeach
                        {{-- @else
                            <tr>
                                <td colspan="8" class="px-6 py-4 text-center text-sm text-gray-500">
                                    No Tcc Record Found
                                </td>
                            </tr>
                        @endif --}}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</form>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Update submit button visibility
    function updateSubmitButtonVisibility() {
        if ($('.rowCheckbox:checked').length > 0) {
            $('#submitButton').show();
        } else {
            $('#submitButton').hide();
        }
    }

    // Initialize DataTable
    var vColumnsList = [
        { orderable: true },
        { orderable: true },
        { orderable: true },
        { orderable: true },
        { orderable: true },
        { orderable: true },
        { orderable: true },
        { orderable: false }
    ];

    $('#tblNewRequest').DataTable({
        responsive: true,
        columnDefs: vColumnsList,
        language: {
            emptyTable: "No Tcc Record Found"
        },
        order: [[0, 'asc']]
    });

    // Check All functionality
    $('#checkAll').click(function() {
        $('.rowCheckbox').prop('checked', this.checked);
        updateSubmitButtonVisibility();
    });

    // Individual checkbox click
    $('.rowCheckbox').click(function() {
        if (!this.checked) {
            $('#checkAll').prop('checked', false);
        } else {
            if ($('.rowCheckbox:checked').length === $('.rowCheckbox').length) {
                $('#checkAll').prop('checked', true);
            }
        }
        updateSubmitButtonVisibility();
    });

    // Form submission
    $('#requestForm').submit(function(event) {
        var selectedIds = [];
        $('.rowCheckbox:checked').each(function() {
            selectedIds.push($(this).val());
        });

        // If no checkboxes are selected, prevent form submission
        if (selectedIds.length === 0) {
            alert('Please select at least one item.');
            event.preventDefault();
            return;
        }

        // Show loader
        $("#divLoaderPage").hide();
        $("#divLoader").show();
    });

    // Initial check to see if any checkboxes are checked and update submit button visibility
    updateSubmitButtonVisibility();
});
</script>
@endpush