@extends('admin.layout.main')


@php
    // dd($project);
@endphp

@section('admin')
    <div class="flex flex-col h-full">
        <!-- Header -->
        <div class="mb-8">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <div>
                    <h1 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white">Project Details</h1>
                    <p class="text-gray-500 dark:text-gray-400 mt-1">Manage project information and track progress</p>
                    <div
                        class="mt-2 inline-flex items-center gap-2 text-sm bg-gradient-to-r from-blue-500 to-blue-600 text-white px-4 py-1 rounded-full">
                        <i class="fas fa-project-diagram text-xs"></i>
                        <span>ID: {{ $project->id }}</span>
                    </div>
                </div>
                <div class="flex items-center gap-3">
                    <form id="projectStatusForm" action="{{ route('admin.projects.update-status', $project->id) }}"
                        method="POST" class="inline">
                        @csrf
                        @method('PATCH')
                        <select name="status" id="projectStatus"
                            class="px-3 py-1.5 text-sm rounded-lg border focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
                            @if ($project->status === 'Active') bg-green-50 text-green-700 border-green-200 dark:bg-green-900 dark:text-green-300 dark:border-green-800
                            @elseif($project->status === 'Stop')
                                bg-red-50 text-red-700 border-red-200 dark:bg-red-900/30 dark:text-red-300 dark:border-red-800
                            @elseif($project->status === 'Waiting for Document')
                                bg-yellow-50 text-yellow-700 border-yellow-200 dark:bg-yellow-900/30 dark:text-yellow-300 dark:border-yellow-800
                            @elseif($project->status === 'Waiting for Payment')
                                bg-orange-50 text-orange-700 border-orange-200 dark:bg-orange-900/30 dark:text-orange-300 dark:border-orange-800
                            @elseif($project->status === 'Canceled')
                                bg-gray-50 text-gray-700 border-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600
                            @elseif($project->status === 'Completed')
                                bg-blue-50 text-blue-700 border-blue-200 dark:bg-blue-900/30 dark:text-blue-300 dark:border-blue-800
                            @else
                                bg-gray-50 text-gray-700 border-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600 @endif">
                            <option value="Active" @if ($project->status === 'Active') selected @endif>Active</option>
                            <option value="Stop" @if ($project->status === 'Stop') selected @endif>Stop</option>
                            <option value="Waiting for Document" @if ($project->status === 'Waiting for Document') selected @endif>Waiting
                                for Document</option>
                            <option value="Waiting for Payment" @if ($project->status === 'Waiting for Payment') selected @endif>Waiting
                                for Payment</option>
                            <option value="Canceled" @if ($project->status === 'Canceled') selected @endif>Canceled</option>
                            <option value="Completed" @if ($project->status === 'Completed') selected @endif>Completed</option>
                        </select>
                    </form>
                </div>
            </div>
        </div>

        <!-- Main Content Grid -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- Left Column (2/3) -->
            <div class="lg:col-span-2 space-y-6">
                <!-- Project Overview -->
                <div
                    class="bg-white dark:bg-gray-800 rounded-xl border border-gray-100 dark:border-gray-700/50 shadow-sm p-5">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
                        <div class="w-8 h-8 rounded-lg bg-blue-50 dark:bg-blue-900/20 flex items-center justify-center">
                            <i class="fas fa-info-circle text-blue-500 dark:text-blue-400 text-sm"></i>
                        </div>
                        Project Overview
                    </h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="space-y-3">
                            <div class="space-y-1">
                                <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Project Name</p>
                                <p class="text-lg font-semibold text-gray-900 dark:text-white">
                                    {{ $project->name ?? 'Unnamed Project' }}</p>
                            </div>
                            <div class="space-y-1">
                                <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Created Date</p>
                                <p class="text-gray-900 dark:text-white">{{ $project->created_at->format('M d, Y') }}</p>
                            </div>
                        </div>
                        <div class="space-y-3">
                            <div class="space-y-1">
                                <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Request ID</p>
                                <p class="text-sm text-gray-900 dark:text-white">{{ $project->request_id }}</p>
                            </div>
                            <div class="space-y-1">
                                <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Last Updated</p>
                                <p class="text-gray-900 dark:text-white">{{ $project->updated_at->format('M d, Y') }}</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Services -->
                <div
                    class="bg-white dark:bg-gray-800 rounded-xl border border-gray-100 dark:border-gray-700/50 shadow-sm p-5">
                    @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="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-4">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
                            <div
                                class="w-8 h-8 rounded-lg bg-green-50 dark:bg-green-900/20 flex items-center justify-center">
                                <i class="fas fa-cogs text-green-500 dark:text-green-400 text-sm"></i>
                            </div>
                            Services
                        </h3>
                        <div class="text-sm text-gray-500 dark:text-gray-400">
                            {{ $completedServices }}/{{ $totalServices }} completed
                        </div>

                        <a href="{{ route('admin.project.upload_data', $project->id) }}" class="inline-flex items-center gap-2 bg-gradient-to-r from-emerald-500 to-emerald-600 text-white 
                              px-3 py-1.5 rounded-lg hover:from-emerald-600 hover:to-emerald-700 active:scale-[0.98] 
                              transition-all shadow-sm hover:shadow text-sm">Update Document</a>
                    </div>

                    <!-- Progress Bar -->
                    <div class="mb-4">
                        <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mb-1">
                            <span>Progress</span>
                            <span>{{ $progress }}%</span>
                        </div>
                        <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                            <div class="bg-green-500 h-2 rounded-full transition-all duration-500"
                                style="width: {{ $progress }}%"></div>
                        </div>
                    </div>

                    @if ($totalServices > 0)
                        <div class="space-y-3">
                            @foreach ($services as $key => $service)
                                <div
                                    class="flex items-center justify-between p-3 rounded-lg bg-gray-50 dark:bg-gray-700/50">
                                    <div class="flex items-center gap-3">
                                        <div
                                            class="w-8 h-8 rounded-lg bg-blue-50 dark:bg-blue-900/20 flex items-center justify-center flex-shrink-0">
                                            <i class="fas fa-cog text-blue-500 dark:text-blue-400 text-sm"></i>
                                        </div>
                                        <div class="min-w-0 flex-1">
                                            <p class="text-sm font-medium text-gray-900 dark:text-white">
                                                {{ $service['name'] ?? 'Unknown Service' }}</p>
                                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">ID:
                                                {{ $service['id'] ?? 'N/A' }}</p>
                                        </div>
                                    </div>
                                    <form class="service-status-form"
                                        action="{{ route('admin.projects.update-service-status', $project->id) }}"
                                        method="POST">
                                        @csrf
                                        @method('PATCH')
                                        <input type="hidden" name="service_key" value="{{ $key }}">
                                        <select name="service_status"
                                            class="text-xs px-3 py-1.5 rounded-lg border focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
                                            @if (($service['status'] ?? 'Not Started') === 'Complete') bg-green-50 text-green-700 border-green-200
                                            @elseif(($service['status'] ?? 'Not Started') === 'In Progress')
                                                bg-blue-50 text-blue-700 border-blue-200
                                            @else
                                                bg-yellow-50 text-yellow-700 border-yellow-200 @endif">
                                            <option value="Not Started" @if (($service['status'] ?? 'Not Started') === 'Not Started') selected @endif>
                                                Not Started</option>
                                            <option value="In Progress" @if (($service['status'] ?? 'Not Started') === 'In Progress') selected @endif>
                                                In Progress</option>
                                            <option value="Complete" @if (($service['status'] ?? 'Not Started') === 'Complete') selected @endif>
                                                Complete</option>
                                        </select>
                                    </form>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center py-8 text-gray-400 dark:text-gray-500">
                            <i class="fas fa-cogs text-3xl mb-3 opacity-50"></i>
                            <p class="text-sm">No services found for this project</p>
                        </div>
                    @endif
                </div>

                <!-- Documents -->
                <div
                    class="bg-white dark:bg-gray-800 rounded-xl border border-gray-100 dark:border-gray-700/50 shadow-sm p-5">
                    @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="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-4">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
                            <div
                                class="w-8 h-8 rounded-lg bg-purple-50 dark:bg-purple-900/20 flex items-center justify-center">
                                <i class="fas fa-clipboard-list text-purple-500 dark:text-purple-400 text-sm"></i>
                            </div>
                            Documents
                        </h3>
                        <div class="text-sm text-gray-500 dark:text-gray-400">
                            {{ $completedDocs }}/{{ $totalDocs }} submitted
                        </div>
                    </div>

                    @if ($totalDocs > 0)
                        <div class="space-y-3">
                            @foreach ($documents as $document)
                                <div
                                    class="flex items-center justify-between p-3 rounded-lg bg-gray-50 dark:bg-gray-700/50">
                                    <div class="flex items-center gap-3">
                                        <div
                                            class="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0
                                         @if ($document['type'] === 'file') bg-purple-50 dark:bg-purple-900/20
                                         @elseif($document['type'] === 'number')
                                             bg-green-50 dark:bg-green-900/20
                                         @else
                                             bg-blue-50 dark:bg-blue-900/20 @endif">
                                            <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="min-w-0 flex-1">
                                            <p class="text-sm font-medium text-gray-900 dark:text-white">
                                                {{ $document['name'] ?? 'Unknown Document' }}</p>
                                            @if ($document['value'] ?? false)
                                                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                                    {{ Str::limit($document['value'], 50) }}</p>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="flex items-center gap-2">
                                        @if ($document['status'] ?? false)
                                            <span
                                                class="inline-flex items-center gap-1 px-2 py-1 rounded 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 text-xs"></i>
                                                Submitted
                                            </span>
                                        @else
                                            <span
                                                class="inline-flex items-center gap-1 px-2 py-1 rounded text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300">
                                                <i class="fas fa-clock text-xs"></i>
                                                Pending
                                            </span>
                                        @endif

                                        @if ($document['type'] == 'file' && ($document['value'] ?? false))
                                            <a href="{{ $document['value'] }}" download
                                                class="inline-flex items-center justify-center w-8 h-8 rounded-lg bg-indigo-50 dark:bg-indigo-900/20 
                                                  text-indigo-600 dark:text-indigo-400 hover:bg-indigo-100 dark:hover:bg-indigo-900/30 
                                                  transition-colors"
                                                title="Download">
                                                <i class="fas fa-download text-xs"></i>
                                            </a>
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center py-8 text-gray-400 dark:text-gray-500">
                            <i class="fas fa-clipboard-list text-3xl mb-3 opacity-50"></i>
                            <p class="text-sm">No documents found for this project</p>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Right Column (1/3) -->
            <div class="space-y-6">
                <!-- Client Information -->
                <div
                    class="bg-white dark:bg-gray-800 rounded-xl border border-gray-100 dark:border-gray-700/50 shadow-sm p-5">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
                        <div
                            class="w-8 h-8 rounded-lg bg-orange-50 dark:bg-orange-900/20 flex items-center justify-center">
                            <i class="fas fa-user text-orange-500 dark:text-orange-400 text-sm"></i>
                        </div>
                        Client Information
                    </h3>
                    @php
                        $contactInfo = is_array($project->serviceRequest->contact_info)
                            ? $project->serviceRequest->contact_info
                            : json_decode($project->serviceRequest->contact_info, true) ?? [];
                    @endphp
                    <div class="space-y-3">
                        <div class="space-y-1">
                            <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Full Name</p>
                            <p class="text-gray-900 dark:text-white">
                                {{ $contactInfo['name'] ?? ($project->user->name ?? 'N/A') }}</p>
                        </div>
                        <div class="space-y-1">
                            <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Email</p>
                            <p class="text-gray-900 dark:text-white">
                                {{ $contactInfo['email'] ?? ($project->user->email ?? 'N/A') }}</p>
                        </div>
                        <div class="space-y-1">
                            <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Phone</p>
                            <p class="text-gray-900 dark:text-white">{{ $contactInfo['phone'] ?? 'N/A' }}</p>
                        </div>
                        <div class="space-y-1">
                            <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Company</p>
                            <p class="text-gray-900 dark:text-white">{{ $contactInfo['company'] ?? 'N/A' }}</p>
                        </div>
                    </div>
                </div>

                <!-- Financial Information -->
                <div
                    class="bg-white dark:bg-gray-800 rounded-xl border border-gray-100 dark:border-gray-700/50 shadow-sm p-5">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
                        <div class="w-8 h-8 rounded-lg bg-green-50 dark:bg-green-900/20 flex items-center justify-center">
                            <i class="fas fa-money-bill-wave text-green-500 dark:text-green-400 text-sm"></i>
                        </div>
                        Financial Information
                    </h3>
                    <div class="space-y-3">
                        <div class="flex justify-between items-center py-2 border-b border-gray-100 dark:border-gray-700">
                            <span class="text-sm text-gray-500 dark:text-gray-400">Total Amount</span>
                            <span
                                class="text-sm font-bold text-gray-900 dark:text-white">{{ number_format($project->serviceRequest->total_price ?? 0, 0) }}
                                SR</span>
                        </div>
                        <div class="flex justify-between items-center py-2 border-b border-gray-100 dark:border-gray-700">
                            <span class="text-sm text-gray-500 dark:text-gray-400">Amount Paid</span>
                            <span
                                class="text-sm font-bold text-green-600 dark:text-green-400">{{ number_format($project->amount_paid ?? 0, 0) }}
                                SR</span>
                        </div>
                        <div class="flex justify-between items-center py-2">
                            <span class="text-sm text-gray-500 dark:text-gray-400">Pending Amount</span>
                            <span class="text-sm font-bold text-orange-600 dark:text-orange-400">
                                {{ number_format(($project->serviceRequest->total_price ?? 0) - ($project->amount_paid ?? 0), 0) }}
                                SR
                            </span>
                        </div>
                        <div class="pt-3">
                            @if (($project->amount_paid ?? 0) >= ($project->serviceRequest->total_price ?? 0))
                                <span
                                    class="inline-flex items-center gap-1 px-3 py-1.5 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 text-xs"></i>
                                    Fully Paid
                                </span>
                            @elseif(($project->amount_paid ?? 0) > 0)
                                <span
                                    class="inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">
                                    <i class="fas fa-clock text-xs"></i>
                                    Partially Paid
                                </span>
                            @else
                                <span
                                    class="inline-flex items-center gap-1 px-3 py-1.5 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-exclamation-circle text-xs"></i>
                                    Unpaid
                                </span>
                            @endif
                        </div>
                    </div>
                </div>

                <!-- Invoices -->
                <div
                    class="bg-white dark:bg-gray-800 rounded-xl border border-gray-100 dark:border-gray-700/50 shadow-sm p-5">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
                            <div
                                class="w-8 h-8 rounded-lg bg-emerald-50 dark:bg-emerald-900/20 flex items-center justify-center">
                                <i class="fas fa-receipt text-emerald-500 dark:text-emerald-400 text-sm"></i>
                            </div>
                            Invoices
                        </h3>

                        <a href="#" onclick="document.getElementById('loadingOverlay').classList.remove('hidden')"
                            class="inline-flex items-center gap-2 bg-white text-emerald-600 border border-emerald-600 
                              px-3 py-1.5 rounded-lg hover:from-emerald-600 hover:to-emerald-700 active:scale-[0.98] 
                              transition-all shadow-sm hover:shadow text-sm">
                            <i class="fas fa-plus text-xs"></i>
                            Add Discount
                        </a>


                        <a href="{{ route('admin.payments.create', ['id' => $project->id]) }}"
                            class="inline-flex items-center gap-2 bg-gradient-to-r from-emerald-500 to-emerald-600 text-white 
                              px-3 py-1.5 rounded-lg hover:from-emerald-600 hover:to-emerald-700 active:scale-[0.98] 
                              transition-all shadow-sm hover:shadow text-sm">
                            <i class="fas fa-plus text-xs"></i>
                            New Invoice
                        </a>
                    </div>

                    <div class="space-y-3">
                        @forelse($payents as $item)
                            <div class="flex items-center justify-between p-3 rounded-lg bg-gray-50 dark:bg-gray-700/50">
                                <div class="min-w-0 flex-1">
                                    <p class="text-sm font-medium text-gray-900 dark:text-white">
                                        #INV-{{ str_pad($item->id, 5, '0', STR_PAD_LEFT) }}
                                    </p>
                                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                        {{ number_format($item->amount, 0) }} SR</p>
                                </div>
                                <div class="flex items-center gap-2">
                                    @php
                                        $statusColors = [
                                            'paid' =>
                                                'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300',
                                            'pending' =>
                                                'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300',
                                            'overdue' => 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300',
                                            'draft' => 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300',
                                        ];
                                        $statusColor = $statusColors[$item->status] ?? $statusColors['draft'];
                                    @endphp
                                    <span
                                        class="inline-flex items-center gap-1 px-2 py-1 rounded text-xs font-medium {{ $statusColor }} capitalize">
                                        {{ $item->status }}
                                    </span>
                                    <a href="{{ route('admin.payments.view', $item->id) }}"
                                        class="inline-flex items-center justify-center w-8 h-8 rounded-lg bg-blue-50 dark:bg-blue-900/20 
                                          text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-900/30 
                                          transition-colors"
                                        title="View Invoice">
                                        <i class="fas fa-eye text-xs"></i>
                                    </a>
                                </div>
                            </div>
                        @empty
                            <div class="text-center py-8 text-gray-400 dark:text-gray-500">
                                <i class="fas fa-file-invoice text-3xl mb-3 opacity-50"></i>
                                <p class="text-sm">No invoices found</p>
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>



    <div class="fixed h-full w-full bg-black/50 dark:bg-gray-900/80 backdrop-blur-sm z-50 top-0 left-0 right-0 flex items-center justify-center p-4 hidden"
        id="loadingOverlay">
        <form method="POST" action="{{ route('admin.projects.discount',$project->id) }}" class="w-full max-w-md bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden">
            <!-- Header -->

            @csrf

            <div class="bg-gradient-to-r from-emerald-500 to-emerald-600 text-white  p-6 hover:from-emerald-600 hover:to-emerald-700">
                <div class="flex justify-between items-center">
                    <h2 class="text-2xl font-bold text-white">Add Discount</h2>
                    <button onclick="document.getElementById('loadingOverlay').classList.add('hidden')"
                        class="text-white hover:bg-white/20 p-2 rounded-lg transition-colors">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>
                <p class="text-blue-100 mt-2">Apply discount to this order</p>
            </div>

            <!-- Form Content -->
            <div class="p-6 space-y-6">
                <!-- Discount Type Selection -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
                        Discount Type
                    </label>
                    <div class="grid grid-cols-2 gap-3">
                        <button type="button"
                            class="discount-type-btn active py-3 px-4 rounded-lg border-2 border-blue-500 bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 font-medium">
                            Percentage (%)
                        </button>
                        <button type="button"
                            class="discount-type-btn py-3 px-4 rounded-lg border-2 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-700 dark:text-gray-300 font-medium hover:border-gray-400 dark:hover:border-gray-500 transition-colors">
                            Fixed Amount
                        </button>
                    </div>
                </div>

                <!-- Amount Input -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Discount Amount
                    </label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <span class="amount-prefix text-gray-500 dark:text-gray-400 font-medium">%</span>
                        </div>
                        <input type="number" min="0" max="100" step="0.01"
                            placeholder="Enter discount amount"
                            name="discount"
                            required
                            class="pl-10 w-full px-4 py-3 border-2 border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-200 dark:focus:ring-blue-900 focus:outline-none transition-all"
                            id="discountAmount">
                        
                        <input class="hidden" type="text" name="type" value="percentage" id="discountTypeInput">
                        <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                            <span class="amount-suffix text-gray-500 dark:text-gray-400 font-medium"></span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Footer with Buttons -->
            <div
                class="px-6 py-4 bg-gray-50 dark:bg-gray-900/50 border-t border-gray-200 dark:border-gray-700 flex justify-end space-x-3">
                <button type="button" onclick="document.getElementById('loadingOverlay').classList.add('hidden')"
                    class="px-5 py-2.5 border-2 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 font-medium rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                    Cancel
                </button>
                <button type="submit"
                    class="px-5 py-2.5 bg-gradient-to-r from-blue-500 to-purple-600 dark:from-blue-600 dark:to-purple-700 text-white font-medium rounded-lg hover:from-blue-600 hover:to-purple-700 dark:hover:from-blue-700 dark:hover:to-purple-800 transform hover:-translate-y-0.5 transition-all duration-200 shadow-lg hover:shadow-xl active:translate-y-0">
                    Apply Discount
                </button>
            </div>
        </form>
    </div>

    <script>
        document.querySelectorAll('.discount-type-btn').forEach(button => {
            button.addEventListener('click', function() {
                // Remove active class from all buttons
                document.querySelectorAll('.discount-type-btn').forEach(btn => {
                    btn.classList.remove('active', 'border-blue-500', 'bg-blue-50',
                        'dark:bg-blue-900/30', 'text-blue-600', 'dark:text-blue-400');
                    btn.classList.add('border-gray-300', 'dark:border-gray-600', 'bg-gray-50',
                        'dark:bg-gray-700', 'text-gray-700', 'dark:text-gray-300');
                });

                // Add active class to clicked button
                this.classList.remove('border-gray-300', 'dark:border-gray-600', 'bg-gray-50',
                    'dark:bg-gray-700', 'text-gray-700', 'dark:text-gray-300');
                this.classList.add('active', 'border-blue-500', 'bg-blue-50', 'dark:bg-blue-900/30',
                    'text-blue-600', 'dark:text-blue-400');

                // Update input based on type
                const input = document.getElementById('discountAmount');
                const prefix = document.querySelector('.amount-prefix');
                const suffix = document.querySelector('.amount-suffix');

                if (this.textContent.includes('Percentage')) {
                    input.min = 0;
                    input.max = 100;
                    input.placeholder = 'Enter percentage (0-100)';
                    prefix.textContent = '%';
                    suffix.textContent = '';
                    document.getElementById('discountTypeInput').value = 'percentage';

                } else {
                    input.min = 0;
                    input.max = 10000;
                    input.placeholder = 'Enter amount';
                    prefix.textContent = 'SR';
                    suffix.textContent = '';
                    document.getElementById('discountTypeInput').value = 'fixed';
                }
            });
        });
    </script>

    <style>
        .dark textarea {
            scrollbar-color: #4b5563 #1f2937;
        }

        #loadingOverlay {
            animation: fadeIn 0.3s ease-out;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }
    </style>



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

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


            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