@extends('dashboard.layout')

@section('content')
    <div class="min-h-screen bg-gray-50 dark:bg-dark-primary px-3 mt-2">
        <!-- Main Content -->
        <div class="py-6">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <!-- Left Column - Project Details -->
                <div class="lg:col-span-2 space-y-6">
                    <!-- Project Overview Card -->
                    <div
                        class="bg-white dark:bg-dark-secondary rounded shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
                        <div
                            class="bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center">
                                    <div
                                        class="flex-shrink-0 h-10 w-10 bg-blue-500 rounded flex items-center justify-center">
                                        <i class="fas fa-info-circle text-white"></i>
                                    </div>
                                    <div class="ml-4">
                                        <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Project Overview
                                        </h2>
                                        <p class="text-sm text-gray-500 dark:text-gray-400">Basic project information and
                                            status</p>
                                    </div>
                                </div>

                                <div
                                    class="
    inline-flex items-center px-3 py-1 rounded-full text-sm font-medium border
    @if ($project->status === 'Active') bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300 border-green-200 dark:border-green-800
    @elseif($project->status === 'Stop')
        bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300 border-red-200 dark:border-red-800
    @elseif($project->status === 'Waiting for Document')
        bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300 border-yellow-200 dark:border-yellow-800
    @elseif($project->status === 'Waiting for Payment')
        bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-300 border-orange-200 dark:border-orange-800
    @elseif($project->status === 'Canceled')
        bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-600
    @elseif($project->status === 'Completed')
        bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300 border-blue-200 dark:border-blue-800
    @else
        bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-600 @endif
">
                                    {{ $project->status }}
                                </div>


                            </div>
                        </div>
                        <div class="p-6">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div class="space-y-4">
                                    <div>
                                        <label
                                            class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">Project
                                            Name</label>
                                        <p class="text-lg font-semibold text-gray-900 dark:text-white">
                                            {{ $project->name ?? 'Unnamed Project' }}</p>
                                    </div>
                                    <div>
                                        <label
                                            class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">Created
                                            Date</label>
                                        <p class="text-sm text-gray-900 dark:text-white">
                                            {{ $project->created_at->format('F d, Y') }}</p>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">Last
                                            Updated</label>
                                        <p class="text-sm text-gray-900 dark:text-white">
                                            {{ $project->updated_at->format('F d, Y') }}</p>
                                    </div>
                                </div>
                                <div class="space-y-4">
                                    <div>
                                        <label
                                            class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">Project
                                            ID</label>
                                        <p class="text-sm font-mono text-gray-900 dark:text-white">{{ $project->id }}</p>
                                    </div>
                                    <div>
                                        <label
                                            class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">Request
                                            ID</label>
                                        <p class="text-sm font-mono text-gray-900 dark:text-white">
                                            {{ $project->request_id }}</p>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">User
                                            ID</label>
                                        <p class="text-sm font-mono text-gray-900 dark:text-white">{{ $project->user_id }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Services Card -->
                    <div
                        class="bg-white dark:bg-dark-secondary rounded shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
                        <div
                            class="bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20 px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center">
                                    <div
                                        class="flex-shrink-0 h-10 w-10 bg-green-500 rounded flex items-center justify-center">
                                        <i class="fas fa-cogs text-white"></i>
                                    </div>
                                    <div class="ml-4">
                                        <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Services</h2>
                                        <p class="text-sm text-gray-500 dark:text-gray-400">Requested services and their
                                            status</p>
                                    </div>
                                </div>
                                @php
                                    $services = is_array($project->services)
                                        ? $project->services
                                        : json_decode($project->services, true) ?? [];
                                    $totalServices = count($services);
                                    $completedServices = collect($services)->where('status', 'Complete')->count();
                                    $progress =
                                        $totalServices > 0 ? round(($completedServices / $totalServices) * 100) : 0;
                                @endphp
                                <div class="text-right">
                                    <div class="text-sm font-medium text-gray-900 dark:text-white">
                                        {{ $completedServices }}/{{ $totalServices }} Completed</div>
                                    <div class="w-24 bg-gray-200 dark:bg-gray-700 rounded-full h-2 mt-1">
                                        <div class="bg-green-500 h-2 rounded-full" style="width: {{ $progress }}%">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="p-6">
                            @if ($totalServices > 0)
                                <div class="space-y-4">
                                    @foreach ($services as $key => $service)
                                        <div
                                            class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-800 rounded">
                                            <div class="flex items-center">
                                                <div
                                                    class="flex-shrink-0 h-8 w-8 bg-blue-100 dark:bg-blue-900/20 rounded flex items-center justify-center">
                                                    <i class="fas fa-cog text-blue-500 dark:text-blue-400 text-sm"></i>
                                                </div>
                                                <div class="ml-3">
                                                    <h3 class="text-sm font-medium text-gray-900 dark:text-white">
                                                        {{ $service['name'] ?? 'Unknown Service' }}</h3>
                                                    <p class="text-xs text-gray-500 dark:text-gray-400">ID:
                                                        {{ $service['id'] ?? 'N/A' }}</p>
                                                </div>
                                            </div>
                                            <div class="flex items-center space-x-3">
                                                @if (!empty($service['documents']))
                                                    <ul>
                                                        @foreach ($service['documents'] as $document)
                                                            <li>
                                                                <a href="{{ asset($document['file_path']) }}" download
                                                                    target="_blank" class="btn btn-sm btn-primary mt-1 text-xs">
                                                                   {{ $document['name'] }} 
                                                                    <i class="fas fa-download ml-1"></i>
                                                                </a>
                                                            </li>
                                                            <hr>
                                                        @endforeach
                                                    </ul>
                                                @else
                                                    <p>No documents found.</p>
                                                @endif
                                                @php
                                                    $serviceStatus = $service['status'] ?? 'Not Started';
                                                @endphp

                                                <div
                                                    class="
        text-xs px-2 py-1 rounded border
        @if ($serviceStatus === 'Complete') bg-green-100 text-green-800 border-green-200
        @elseif ($serviceStatus === 'In Progress')
            bg-blue-100 text-blue-800 border-blue-200
        @else
            bg-yellow-100 text-yellow-800 border-yellow-200 @endif
    ">
                                                    {{ $serviceStatus }}
                                                </div>
                                            </div>

                                        </div>
                                    @endforeach
                                </div>
                            @else
                                <div class="text-center py-8">
                                    <i class="fas fa-cogs text-4xl text-gray-300 dark:text-gray-600 mb-3"></i>
                                    <p class="text-gray-500 dark:text-gray-400">No services found for this project</p>
                                </div>
                            @endif
                        </div>
                    </div>

                    <!-- Requirements Card -->
                    <div
                        class="bg-white dark:bg-dark-secondary pb-5 rounded shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
                        <div
                            class="bg-gradient-to-r from-purple-50 to-indigo-50 dark:from-purple-900/20 dark:to-indigo-900/20 px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center">
                                    <div
                                        class="flex-shrink-0 h-10 w-10 bg-purple-500 rounded flex items-center justify-center">
                                        <i class="fas fa-clipboard-list text-white"></i>
                                    </div>
                                    <div class="ml-4">
                                        <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Document</h2>
                                        <p class="text-sm text-gray-500 dark:text-gray-400">Project requirements and
                                            documents</p>
                                    </div>
                                </div>
                                @php
                                    $documents = is_array($project->documents_data)
                                        ? $project->documents_data
                                        : json_decode($project->documents_data, true) ?? [];
                                    $totalDocs = count($documents);
                                    $completedDocs = collect($documents)->where('status', true)->count();
                                @endphp
                                <div class="text-sm font-medium text-gray-900 dark:text-white">
                                    {{ $completedDocs }}/{{ $totalDocs }} Submitted
                                </div>
                            </div>
                        </div>
                        <div class="p-6">
                            @if ($totalDocs > 0)
                                <div class="space-y-4">
                                    @foreach ($documents as $document)
                                        <div
                                            class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-800 rounded">
                                            <div class="flex items-center">
                                                <div
                                                    class="flex-shrink-0 h-8 w-8 
                                                @if ($document['type'] === 'file') bg-purple-100 dark:bg-purple-900/20 
                                                @elseif($document['type'] === 'number')
                                                    bg-green-100 dark:bg-green-900/20
                                                @else
                                                    bg-blue-100 dark:bg-blue-900/20 @endif rounded flex items-center justify-center">
                                                    <i
                                                        class="fas 
                                                    @if ($document['type'] === 'file') fa-file text-purple-500 dark:text-purple-400
                                                    @elseif($document['type'] === 'number')
                                                        fa-hashtag text-green-500 dark:text-green-400
                                                    @else
                                                        fa-font text-blue-500 dark:text-blue-400 @endif text-sm">
                                                    </i>
                                                </div>
                                                <div class="ml-3">
                                                    <h3 class="text-sm font-medium text-gray-900 dark:text-white">
                                                        {{ $document['name'] ?? 'Unknown Document' }}</h3>

                                                </div>
                                            </div>
                                            <div class="flex items-center space-x-3">
                                                @if ($document['status'] ?? false)
                                                    <span
                                                        class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300">
                                                        <i class="fas fa-check-circle mr-1"></i>
                                                        Submitted
                                                    </span>
                                                @else
                                                    <span
                                                        class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300">
                                                        <i class="fas fa-clock mr-1"></i>
                                                        Not Submitted
                                                    </span>
                                                @endif

                                                @if ($document['type'] == 'file')
                                                    <a href="{{ $document['value'] ?? '#' }}" target="_blank"
                                                        class="text-indigo-600 hover:text-indigo-900 bg-indigo-200 px-3 py-2 rounded-full dark:text-indigo-400 dark:hover:text-indigo-300">
                                                        <i class="fas fa-download"></i>
                                                    </a>
                                                @endif

                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            @else
                                <div class="text-center py-8">
                                    <i class="fas fa-clipboard-list text-4xl text-gray-300 dark:text-gray-600 mb-3"></i>
                                    <p class="text-gray-500 dark:text-gray-400">No requirements found for this project</p>
                                </div>
                            @endif
                        </div>

                        <div class="px-5">
                            <a href="{{ route('dashboard.projects.documents', [$project]) }}"
                                class="px-4 py-2 bg-emerald-500 hover:bg-emerald-600 text-white rounded text-sm font-medium transition-colors duration-200 shadow-sm">
                                <i class="fa-solid fa-upload mr-2"></i> Upload Document
                            </a>
                        </div>

                    </div>
                </div>

                <!-- Right Column - Client & Financial Info -->
                <div class="space-y-6">
                    <!-- Client Information Card -->
                    <div
                        class="bg-white dark:bg-dark-secondary rounded shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
                        <div
                            class="bg-gradient-to-r from-orange-50 to-amber-50 dark:from-orange-900/20 dark:to-amber-900/20 px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                            <div class="flex items-center">
                                <div class="flex-shrink-0 h-10 w-10 bg-orange-500 rounded flex items-center justify-center">
                                    <i class="fas fa-user text-white"></i>
                                </div>
                                <div class="ml-4">
                                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Client Information</h2>
                                    <p class="text-sm text-gray-500 dark:text-gray-400">Contact details</p>
                                </div>
                            </div>
                        </div>
                        <div class="p-6">
                            @php
                                $contactInfo = is_array($project->serviceRequest->contact_info)
                                    ? $project->serviceRequest->contact_info
                                    : json_decode($project->serviceRequest->contact_info, true) ?? [];
                            @endphp
                            <div class="space-y-4">
                                <div>
                                    <label
                                        class="block text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">Full
                                        Name</label>
                                    <p class="mt-1 text-sm font-medium text-gray-900 dark:text-white">
                                        {{ $contactInfo['name'] ?? ($project->user->name ?? 'N/A') }}</p>
                                </div>
                                <div>
                                    <label
                                        class="block text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">Email
                                        Address</label>
                                    <p class="mt-1 text-sm text-gray-900 dark:text-white">
                                        {{ $contactInfo['email'] ?? ($project->user->email ?? 'N/A') }}</p>
                                </div>
                                <div>
                                    <label
                                        class="block text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">Phone
                                        Number</label>
                                    <p class="mt-1 text-sm text-gray-900 dark:text-white">
                                        {{ $contactInfo['phone'] ?? 'N/A' }}</p>
                                </div>
                                <div>
                                    <label
                                        class="block text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">Company</label>
                                    <p class="mt-1 text-sm text-gray-900 dark:text-white">
                                        {{ $contactInfo['company'] ?? 'N/A' }}</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Financial Information Card -->
                    <div
                        class="bg-white dark:bg-dark-secondary rounded shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
                        <div
                            class="bg-gradient-to-r from-emerald-50 to-green-50 dark:from-emerald-900/20 dark:to-green-900/20 px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                            <div class="flex items-center">
                                <div
                                    class="flex-shrink-0 h-10 w-10 bg-emerald-500 rounded flex items-center justify-center">
                                    <i class="fas fa-money-bill-wave text-white"></i>
                                </div>
                                <div class="ml-4">
                                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Financial Information
                                    </h2>
                                    <p class="text-sm text-gray-500 dark:text-gray-400">Payment details</p>
                                </div>
                            </div>
                        </div>
                        <div class="p-6">
                            <div class="space-y-4">
                                <div class="flex justify-between items-center">
                                    <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Total Amount:</span>
                                    <span
                                        class="text-lg font-bold text-gray-900 dark:text-white">{{ number_format($project->serviceRequest->total_price ?? 0, 2) }}
                                        SR</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Amount Paid:</span>
                                    <span
                                        class="text-lg font-bold text-green-600 dark:text-green-400">{{ number_format($project->amount_paid ?? 0, 2) }}
                                        SR</span>
                                </div>
                                <div
                                    class="flex justify-between items-center pt-3 border-t border-gray-200 dark:border-gray-600">
                                    <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Pending
                                        Amount:</span>
                                    <span class="text-lg font-bold text-orange-600 dark:text-orange-400">
                                        {{ number_format(($project->serviceRequest->total_price ?? 0) - ($project->amount_paid ?? 0), 2) }}
                                        SR
                                    </span>
                                </div>
                                <div class="pt-3">
                                    <label
                                        class="block text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-2">Payment
                                        Status</label>
                                    @if (($project->amount_paid ?? 0) >= ($project->serviceRequest->total_price ?? 0))
                                        <span
                                            class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300">
                                            <i class="fas fa-check-circle mr-1"></i>
                                            Fully Paid
                                        </span>
                                    @elseif(($project->amount_paid ?? 0) > 0)
                                        <span
                                            class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">
                                            <i class="fas fa-clock mr-1"></i>
                                            Partially Paid
                                        </span>
                                    @else
                                        <span
                                            class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300">
                                            <i class="fas fa-exclamation-circle mr-1"></i>
                                            Unpaid
                                        </span>
                                    @endif
                                </div>


                            </div>
                        </div>
                    </div>
                    <div
                        class="bg-white dark:bg-gray-900 rounded shadow-sm border border-gray-200 dark:border-gray-800 overflow-hidden transition-all duration-300 hover:shadow-md">
                        <!-- Header Section -->
                        <div
                            class="bg-gradient-to-r from-emerald-50 to-green-50 dark:from-emerald-900/20 dark:to-green-900/20 px-6 py-5 border-b border-gray-200 dark:border-gray-800">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center">
                                    <div
                                        class="flex-shrink-0 h-12 w-12 bg-gradient-to-br from-emerald-500 to-green-500 rounded-xl flex items-center justify-center shadow-sm">
                                        <i class="fa-solid fa-receipt text-white text-lg"></i>
                                    </div>
                                    <div class="ml-4">
                                        <h2 class="text-xl font-bold text-gray-900 dark:text-white">Invoices</h2>

                                    </div>
                                </div>

                            </div>
                        </div>

                        <!-- Invoice List -->
                        <div class="p-6">
                            @foreach ($payents as $item)
                                <div class="flex items-center justify-between">
                                    <p class="text-sm text-gray-900 dark:text-white">
                                        #INV-{{ str_pad($item->id, 5, '0', STR_PAD_LEFT) }}</p>
                                    <p class="text-sm text-gray-900 dark:text-white">
                                        {{ number_format($item->amount, 2) }} SR</p>

                                    <p>
                                        @php
                                            $statusColors = [
                                                'paid' =>
                                                    'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400',
                                                'pending' =>
                                                    'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400',
                                                'overdue' =>
                                                    'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400',
                                                'draft' =>
                                                    'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-400',
                                            ];
                                            $statusColor = $statusColors[$item->status] ?? $statusColors['draft'];
                                        @endphp
                                        <span
                                            class="px-3 py-1 rounded-full text-xs font-medium {{ $statusColor }} capitalize">
                                            {{ $item->status }}
                                        </span>
                                    </p>

                                    @if ($item->status == 'unpaid')
                                        <a href="{{ route('dashboard.project.pay', $item->id) }}"
                                            class=" flex items-center text-xs justify-center px-3 py-1 rounded-lg border border-gray-300 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors duration-200"
                                            title="Download">
                                            Pay now
                                        </a>
                                    @endif
                                </div>
                            @endforeach

                            <!-- Empty State -->
                            @if (count($payents) === 0)
                                <div class="text-center py-12">
                                    <div
                                        class="mx-auto h-16 w-16 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center mb-4">
                                        <i class="fa-regular fa-file-lines text-gray-400 text-xl"></i>
                                    </div>
                                    <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-1">No invoices found
                                    </h3>
                                    <p class="text-gray-500 dark:text-gray-400 max-w-md mx-auto">You don't have any
                                        invoices yet.</p>

                                </div>
                            @endif

                            <!-- Pagination (if needed) -->
                            @if (count($payents) > 0)
                                <div class="mt-6 flex items-center justify-between">
                                    <div class="text-sm text-gray-500 dark:text-gray-400">
                                        Showing <span class="font-medium">1</span> to <span
                                            class="font-medium">{{ count($payents) }}</span> of <span
                                            class="font-medium">{{ count($payents) }}</span> results
                                    </div>
                                    <div class="flex space-x-2">
                                        <button
                                            class="px-3 py-2 text-sm font-medium text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200"
                                            disabled>
                                            Previous
                                        </button>
                                        <button
                                            class="px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
                                            Next
                                        </button>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        .progress-bar {
            transition: width 0.5s ease-in-out;
        }

        select:focus {
            outline: none;
            ring: 2px;
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Project status change
            const projectStatusSelect = document.getElementById('projectStatus');
            if (projectStatusSelect) {
                projectStatusSelect.addEventListener('change', function() {
                    this.form.submit();
                });
            }

            // Service status change
            const serviceStatusForms = document.querySelectorAll('.service-status-form select');
            serviceStatusForms.forEach(select => {
                select.addEventListener('change', function() {
                    this.closest('form').submit();
                });
            });

            // Add loading indicators
            const forms = document.querySelectorAll('form');
            forms.forEach(form => {
                form.addEventListener('submit', function() {
                    const submitBtn = this.querySelector('button[type="submit"]');
                    if (submitBtn) {
                        submitBtn.innerHTML =
                            '<i class="fas fa-spinner fa-spin mr-2"></i> Updating...';
                        submitBtn.disabled = true;
                    }
                });
            });
        });
    </script>
@endsection