@extends('examples.modern-layout-v2')

@section('title', __('messages.deployments.title'))

@section('content')
<div class="p-6" x-data="{ showDeleteModal: false, deploymentToDelete: null, deleteForm: null }" x-cloak>
    <!-- Header -->
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-3xl font-bold text-gray-900">{{__('messages.deployments.title')}}</h1>
        @if(auth()->user()->hasRole('Super-Admin'))
        <a href="{{route('deployments.create')}}" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center">
            <span class="material-icons mr-2">cloud_upload</span>
            {{__('messages.deployments.upload')}}
        </a>
        @endif
    </div>

    <!-- Deployment Status Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
        @foreach($cities as $city)
        <div class="bg-white rounded-lg shadow p-4">
            <div class="flex justify-between items-start mb-2">
                <div>
                    <h3 class="font-bold text-lg">{{$city->name}}</h3>
                    <p class="text-sm text-gray-500">{{$city->code}}</p>
                </div>
                @if($city->current_version)
                <span class="px-2 py-1 bg-green-100 text-green-800 rounded text-xs">{{$city->current_version}}</span>
                @else
                <span class="px-2 py-1 bg-gray-100 text-gray-800 rounded text-xs">{{__('messages.deployments.no_version')}}</span>
                @endif
            </div>
            <div class="text-sm text-gray-600">
                @if($city->last_deployed_at)
                <p>{{__('messages.deployments.last_deployed')}}: {{$city->last_deployed_at->diffForHumans()}}</p>
                @else
                <p>{{__('messages.deployments.never_deployed')}}</p>
                @endif
            </div>
        </div>
        @endforeach
    </div>

    <!-- Deployments Table -->
    <div class="bg-white rounded-lg shadow overflow-hidden">
        <div class="px-6 py-4 border-b">
            <h2 class="text-xl font-bold">{{__('messages.deployments.deployment_history')}}</h2>
        </div>
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">{{__('messages.deployments.version')}}</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">{{__('messages.deployments.description')}}</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">{{__('messages.deployments.uploaded_by')}}</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">{{__('messages.deployments.uploaded_at')}}</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">{{__('messages.deployments.status')}}</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">{{__('messages.deployments.cities')}}</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">{{__('messages.service_page.actions')}}</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                @forelse($deployments as $deployment)
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="font-mono text-sm">{{$deployment->version}}</span>
                    </td>
                    <td class="px-6 py-4">
                        <span class="text-sm text-gray-900">{{Str::limit($deployment->description, 50)}}</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="text-sm">{{$deployment->uploader->username ?? 'Unknown'}}</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="text-sm">{{$deployment->uploaded_at->format('Y-m-d H:i')}}</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-{{$deployment->status_color}}-100 text-{{$deployment->status_color}}-800">
                            {{$deployment->status_label}}
                        </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="text-sm">{{count($deployment->getDeployedCities())}} / {{$cities->count()}}</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                        <a href="{{route('deployments.show', $deployment->id)}}" class="text-blue-600 hover:text-blue-900 mr-3">{{__('messages.service_page.view')}}</a>
                        @if(auth()->user()->hasRole('Super-Admin') && $deployment->status === 'pending')
                        <form action="{{route('deployments.destroy', $deployment->id)}}" method="POST" class="inline" x-ref="deleteForm{{$deployment->id}}">
                            @csrf
                            @method('DELETE')
                            <button type="button" class="text-red-600 hover:text-red-900" @click="deploymentToDelete = {id: {{$deployment->id}}, version: '{{$deployment->version}}'}; deleteForm = $refs.deleteForm{{$deployment->id}}; showDeleteModal = true">{{__('messages.service_page.delete')}}</button>
                        </form>
                        @endif
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="7" class="px-6 py-12 text-center text-gray-500">
                        {{__('messages.deployments.no_deployments')}}
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
        <div class="px-6 py-4 border-t">
            {{$deployments->links()}}
        </div>
    </div>

    <!-- Delete Confirmation Modal -->
    <div 
        x-show="showDeleteModal"
        x-cloak
        class="fixed inset-0 z-50 overflow-y-auto"
        style="display: none;"
        @keydown.escape.window="showDeleteModal = false"
    >
        <!-- Backdrop -->
        <div 
            class="fixed inset-0 bg-gray-900 bg-opacity-50 transition-opacity"
            @click="showDeleteModal = false"
            x-show="showDeleteModal"
            x-transition:enter="ease-out duration-300"
            x-transition:enter-start="opacity-0"
            x-transition:enter-end="opacity-100"
            x-transition:leave="ease-in duration-200"
            x-transition:leave-start="opacity-100"
            x-transition:leave-end="opacity-0"
        ></div>
        
        <!-- Modal -->
        <div class="flex items-center justify-center min-h-screen px-4 py-4">
            <div 
                class="relative bg-white rounded-2xl overflow-hidden shadow-xl transform transition-all w-full max-w-lg"
                @click.stop
                x-show="showDeleteModal"
                x-transition:enter="ease-out duration-300"
                x-transition:enter-start="opacity-0 scale-95"
                x-transition:enter-end="opacity-100 scale-100"
                x-transition:leave="ease-in duration-200"
                x-transition:leave-start="opacity-100 scale-100"
                x-transition:leave-end="opacity-0 scale-95"
            >
                <div class="bg-white px-6 pt-6 pb-4">
                    <div class="flex items-center justify-between mb-4">
                        <div class="flex items-center">
                            <div class="flex-shrink-0 w-12 h-12 rounded-full bg-red-100 flex items-center justify-center">
                                <span class="material-icons text-red-600 text-2xl">warning</span>
                            </div>
                            <h3 class="text-xl font-bold text-gray-900 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') mr-3 @else ml-3 @endif">
                                {{__('messages.common.confirm_delete')}}
                            </h3>
                        </div>
                        <button 
                            type="button" 
                            @click="showDeleteModal = false"
                            class="text-gray-400 hover:text-gray-600 transition-colors"
                        >
                            <span class="material-icons text-2xl">close</span>
                        </button>
                    </div>
                    
                    <div class="mt-4">
                        <p class="text-sm text-gray-600 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                            {{__('messages.service_page.confirm_delete')}}
                        </p>
                        <p x-show="deploymentToDelete" class="text-sm text-gray-900 font-semibold mt-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                            <span x-text="'Version: ' + (deploymentToDelete?.version || '')"></span>
                        </p>
                        <p class="text-xs text-red-600 mt-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                            {{__('messages.common.cannot_undo')}}
                        </p>
                    </div>
                    
                    <div class="mt-6 flex items-center @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') justify-start flex-row-reverse space-x-reverse @else justify-end @endif space-x-3">
                        <button 
                            type="button"
                            @click="showDeleteModal = false"
                            class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
                        >
                            {{__('messages.common.cancel')}}
                        </button>
                        <button 
                            type="button"
                            @click="if(deleteForm) { deleteForm.submit(); } showDeleteModal = false;"
                            class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
                        >
                            {{__('messages.service_page.delete')}}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@if(session('success'))
<script>
    document.addEventListener('DOMContentLoaded', function() {
        if (typeof showGlobalSuccessNotification === 'function') {
            showGlobalSuccessNotification('{{session("success")}}');
        }
    });
</script>
@endif

@if(session('error'))
<script>
    document.addEventListener('DOMContentLoaded', function() {
        if (typeof showGlobalErrorNotification === 'function') {
            showGlobalErrorNotification('{{session("error")}}');
        }
    });
</script>
@endif
@endsection