@extends('layouts.app')

@section('title', __('services'))

@push('styles')
<link href="{{ asset('css/services.css') }}" rel="stylesheet">
@endpush

@section('content')
<div class="container-fluid">
    <div class="row">
        <!-- Services List -->
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h4 class="fw-bold m-0">{{ __('services') }}</h4>
                <button type="button" class="btn btn-primary-custom" data-bs-toggle="modal" data-bs-target="#addServiceModal">
                    <i class="bi bi-plus-lg me-2"></i> {{ __('add_service') }}
                </button>
            </div>
            
            @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            <div class="services-list">
                @forelse($services as $service)
                    <div class="service-card">
                        <div class="service-info">
                            <h5 class="service-name">{{ app()->getLocale() == 'ar' ? $service->name_ar : $service->name_en }}</h5>
                            <span class="service-type-badge">
                                {{ $types[$service->type] ?? $service->type }}
                            </span>
                        </div>
                        
                        <div class="d-flex align-items-center flex-wrap justify-content-end">
                            <span class="service-price">
                                {{ number_format($service->price, 0) }}
                            </span>
                            
                            <div class="service-actions">
                                @if($service->type === 'monthly_subscription_limited')
                                    <a href="{{ route('services.monthly_subscription_limited.index', ['service_id' => $service->id]) }}" 
                                       class="btn-action" 
                                       title="{{ __('common.manage') ?? 'Manage' }}">
                                        <i class="bi bi-arrow-right-circle"></i>
                                    </a>
                                @endif

                                @if($service->type === 'one_time_service')
                                    <a href="{{ route('services.one_time_service.index', ['service_id' => $service->id]) }}" 
                                       class="btn-action" 
                                       title="{{ __('common.manage') ?? 'Manage' }}">
                                        <i class="bi bi-arrow-right-circle"></i>
                                    </a>
                                @endif

                                @if($service->type === 'ads_creation')
                                    <a href="{{ route('services.ads_creation.index', ['service_id' => $service->id]) }}" 
                                       class="btn-action" 
                                       title="{{ __('common.manage') ?? 'Manage' }}">
                                        <i class="bi bi-arrow-right-circle"></i>
                                    </a>
                                @endif

                                @if($service->type === 'web_development')
                                    <a href="{{ route('services.web_development.index', ['service_id' => $service->id]) }}" 
                                       class="btn-action" 
                                       title="{{ __('common.manage') ?? 'Manage' }}">
                                        <i class="bi bi-arrow-right-circle"></i>
                                    </a>
                                @endif

                                @if($service->type === 'domains_emails')
                                    <a href="{{ route('services.domains_emails.index', ['service_id' => $service->id]) }}" 
                                       class="btn-action" 
                                       title="{{ __('common.manage') ?? 'Manage' }}">
                                        <i class="bi bi-arrow-right-circle"></i>
                                    </a>
                                @endif

                                @if($service->type === 'app_development')
                                    <a href="{{ route('services.app_development.index', ['service_id' => $service->id]) }}" 
                                       class="btn-action" 
                                       title="{{ __('common.manage') ?? 'Manage' }}">
                                        <i class="bi bi-arrow-right-circle"></i>
                                    </a>
                                @endif

                                @if($service->type === 'wordpress_templates')
                                    <a href="{{ route('services.wordpress_templates.index', ['service_id' => $service->id]) }}" 
                                       class="btn-action" 
                                       title="{{ __('common.manage') ?? 'Manage' }}">
                                        <i class="bi bi-arrow-right-circle"></i>
                                    </a>
                                @endif

                                <button type="button" class="btn-action" 
                                        data-id="{{ $service->id }}"
                                        data-name-ar="{{ $service->name_ar }}"
                                        data-name-en="{{ $service->name_en }}"
                                        data-description-ar="{{ $service->description_ar }}"
                                        data-description-en="{{ $service->description_en }}"
                                        data-type="{{ $service->type }}"
                                        data-price="{{ number_format($service->price, 0, '.', '') }}"
                                        onclick="openEditModal(this)"
                                        title="{{ __('edit_service') }}">
                                    <i class="bi bi-pencil"></i>
                                </button>
                                
                                <button type="button" class="btn-action btn-delete" 
                                        onclick="openDeleteModal('{{ $service->id }}')"
                                        title="{{ __('delete_service') }}">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="text-center py-5 text-muted">
                        <i class="bi bi-inbox fs-1 mb-3 d-block"></i>
                        {{ __('no_services_found') }}
                    </div>
                @endforelse
            </div>
        </div>
    </div>
</div>

<!-- Add Service Modal -->
<div class="modal fade" id="addServiceModal" tabindex="-1" aria-hidden="true" 
     data-show-on-load="{{ $errors->any() && old('_method') != 'PUT' ? 'true' : 'false' }}">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header border-0">
                <h5 class="modal-title fw-bold text-primary">{{ __('add_service') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('services.store') }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="name_ar" class="form-label">{{ __('service_name') }} (AR)</label>
                        <input type="text" class="form-control custom-input @error('name_ar') is-invalid @enderror" 
                               id="name_ar" name="name_ar" value="{{ old('name_ar') }}" required>
                        @error('name_ar')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="name_en" class="form-label">{{ __('service_name') }} (EN)</label>
                        <input type="text" class="form-control custom-input @error('name_en') is-invalid @enderror" 
                               id="name_en" name="name_en" value="{{ old('name_en') }}" required>
                        @error('name_en')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="description_ar" class="form-label">{{ __('service_description') }} (AR)</label>
                        <textarea class="form-control custom-input @error('description_ar') is-invalid @enderror" 
                                  id="description_ar" name="description_ar" rows="3">{{ old('description_ar') }}</textarea>
                        @error('description_ar')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="description_en" class="form-label">{{ __('service_description') }} (EN)</label>
                        <textarea class="form-control custom-input @error('description_en') is-invalid @enderror" 
                                  id="description_en" name="description_en" rows="3">{{ old('description_en') }}</textarea>
                        @error('description_en')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="type" class="form-label">{{ __('service_type') }}</label>
                        <select class="form-select custom-input @error('type') is-invalid @enderror" 
                                id="type" name="type" required>
                            <option value="" disabled selected>{{ __('select_service_type') }}</option>
                            @foreach($types as $key => $label)
                                <option value="{{ $key }}" {{ old('type') == $key ? 'selected' : '' }}>
                                    {{ $label }}
                                </option>
                            @endforeach
                        </select>
                        @error('type')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="price" class="form-label">{{ __('service_price') }}</label>
                        <div class="input-group">
                            <input type="number" step="1" min="0" class="form-control custom-input @error('price') is-invalid @enderror" 
                                   id="price" name="price" value="{{ old('price') }}" required>
                        </div>
                        @error('price')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('cancel') }}</button>
                    <button type="submit" class="btn btn-primary-custom">
                        <i class="bi bi-save me-2"></i> {{ __('save') }}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Modal -->
<div class="modal fade" id="editModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header border-0">
                <h5 class="modal-title fw-bold">{{ __('edit_service') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="editForm" method="POST">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="edit_name_ar" class="form-label">{{ __('service_name') }} (AR)</label>
                        <input type="text" class="form-control custom-input" id="edit_name_ar" name="name_ar" required>
                    </div>

                    <div class="mb-3">
                        <label for="edit_name_en" class="form-label">{{ __('service_name') }} (EN)</label>
                        <input type="text" class="form-control custom-input" id="edit_name_en" name="name_en" required>
                    </div>

                    <div class="mb-3">
                        <label for="edit_description_ar" class="form-label">{{ __('service_description') }} (AR)</label>
                        <textarea class="form-control custom-input" id="edit_description_ar" name="description_ar" rows="3"></textarea>
                    </div>

                    <div class="mb-3">
                        <label for="edit_description_en" class="form-label">{{ __('service_description') }} (EN)</label>
                        <textarea class="form-control custom-input" id="edit_description_en" name="description_en" rows="3"></textarea>
                    </div>

                    <div class="mb-3">
                        <label for="edit_type" class="form-label">{{ __('service_type') }}</label>
                        <select class="form-select custom-input" id="edit_type" name="type" required>
                            @foreach($types as $key => $label)
                                <option value="{{ $key }}">{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="edit_price" class="form-label">{{ __('service_price') }}</label>
                        <input type="number" step="1" min="0" class="form-control custom-input" id="edit_price" name="price" required>
                    </div>
                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('cancel') }}</button>
                    <button type="submit" class="btn btn-primary-custom">{{ __('save') }}</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Delete Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header border-0">
                <h5 class="modal-title fw-bold text-danger">{{ __('delete_confirmation_title') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p class="mb-0">{{ __('delete_confirmation_message') }}</p>
            </div>
            <div class="modal-footer border-0">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('cancel') }}</button>
                <form id="deleteForm" method="POST">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger">{{ __('delete') }}</button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const addModalEl = document.getElementById('addServiceModal');
        if (addModalEl && addModalEl.getAttribute('data-show-on-load') === 'true') {
            new bootstrap.Modal(addModalEl).show();
        }
    });

    function openEditModal(button) {
        const id = button.getAttribute('data-id');
        const nameAr = button.getAttribute('data-name-ar');
        const nameEn = button.getAttribute('data-name-en');
        const descriptionAr = button.getAttribute('data-description-ar');
        const descriptionEn = button.getAttribute('data-description-en');
        const type = button.getAttribute('data-type');
        const price = button.getAttribute('data-price');

        const modal = new bootstrap.Modal(document.getElementById('editModal'));
        const form = document.getElementById('editForm');
        
        form.action = `{{ url('services') }}/${id}`;
        document.getElementById('edit_name_ar').value = nameAr;
        document.getElementById('edit_name_en').value = nameEn;
        document.getElementById('edit_description_ar').value = descriptionAr || '';
        document.getElementById('edit_description_en').value = descriptionEn || '';
        document.getElementById('edit_type').value = type;
        document.getElementById('edit_price').value = price;
        
        modal.show();
    }

    function openDeleteModal(id) {
        const modal = new bootstrap.Modal(document.getElementById('deleteModal'));
        const form = document.getElementById('deleteForm');
        
        form.action = `{{ url('services') }}/${id}`;
        
        modal.show();
    }
</script>
@endsection