@extends('layouts.app')

@section('title', $service->name ?? __('service_types.ads_creation'))

@push('styles')
<link href="{{ asset('css/services-subscriptions.css') }}?v={{ time() }}" rel="stylesheet">
<style>
    .service-item-row {
        background-color: var(--bg-secondary);
        padding: 15px;
        border-radius: 8px;
        margin-bottom: 10px;
        position: relative;
    }
    .remove-item-btn {
        position: absolute;
        top: 5px;
        right: 5px; /* LTR */
    }
    [dir="rtl"] .remove-item-btn {
        right: auto;
        left: 5px;
    }
    .payment-row {
        background-color: var(--bg-secondary);
        padding: 10px;
        border-radius: 8px;
        margin-bottom: 8px;
    }
</style>
@endpush

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h4 class="fw-bold m-0">{{ $service->name ?? __('service_types.ads_creation') }}</h4>
                <div class="d-flex align-items-center gap-2">
                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addSubscriberModal" onclick="resetForm()">
                        <i class="bi bi-person-plus-fill me-2"></i> {{ __('pos.add_customer') }}
                    </button>
                    <a href="{{ url()->previous() }}" class="btn btn-outline-secondary">
                        <i class="bi {{ app()->getLocale() == 'ar' ? 'bi-arrow-right' : 'bi-arrow-left' }}"></i> {{ __('common.back') }}
                    </a>
                </div>
            </div>

            <!-- Smart Search -->
            <div class="row mb-4">
                <div class="col-12">
                    <div class="input-group shadow-sm">
                        <span class="input-group-text bg-white border-end-0"><i class="bi bi-search text-muted"></i></span>
                        <input type="text" class="form-control border-start-0 ps-0" id="searchInput" placeholder="{{ __('subscriptions.search_placeholder') }}" value="{{ request('search') }}" autocomplete="off">
                    </div>
                </div>
            </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

            @if(session('error'))
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    {{ session('error') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            @if($errors->any())
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            <div class="subscriptions-list" id="subscriptionsList">
                @include('services.ads_creation.partials.list')
            </div>
        </div>
    </div>
</div>

<!-- Add/Edit Modal -->
<div class="modal fade" id="addSubscriberModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitle">{{ __('pos.add_customer') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="subscriberForm" action="{{ route('services.web_development.store') }}" method="POST">
                @csrf
                <div id="methodField"></div>
                <input type="hidden" name="service_id" value="{{ $service->id }}">
                
                <div class="modal-body">
                    <!-- Customer Info -->
                    <h6 class="fw-bold mb-3 border-bottom pb-2">{{ __('subscriptions.customer_info') }}</h6>
                    <div class="row g-3 mb-4">
                        <div class="col-md-6">
                            <label for="customer_name" class="form-label">{{ __('subscriptions.customer_name') }} <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="customer_name" name="customer_name" required>
                        </div>
                        
                        <div class="col-md-6">
                            <label for="phone" class="form-label">{{ __('subscriptions.phone') }} <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="phone" name="phone" required>
                        </div>
                        
                        <div class="col-md-6">
                            <label for="address" class="form-label">{{ __('subscriptions.address') }} <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="address" name="address" required>
                        </div>
                        
                        <div class="col-md-6">
                            <label for="business_name" class="form-label">{{ __('subscriptions.business_name') }} <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="business_name" name="business_name" required>
                        </div>

                        <div class="col-12">
                            <label for="details" class="form-label">{{ __('subscriptions.order_details') }} <span class="text-danger">*</span></label>
                            <textarea class="form-control" id="details" name="details" rows="3" required></textarea>
                        </div>
                    </div>

                    <!-- Services -->
                    <div class="d-flex justify-content-between align-items-center mb-3 border-bottom pb-2">
                        <h6 class="fw-bold m-0">{{ __('subscriptions.requested_services') }}</h6>
                        <button type="button" class="btn btn-sm btn-outline-primary" onclick="addServiceItem()">
                            <i class="bi bi-plus-lg"></i> {{ __('subscriptions.add_service') }}
                        </button>
                    </div>
                    <div id="servicesContainer" class="mb-4">
                        <!-- Dynamic Services will be added here -->
                    </div>

                    <!-- Financials -->
                    <h6 class="fw-bold mb-3 border-bottom pb-2">{{ __('subscriptions.financial_details') }}</h6>
                    <div class="row g-3 mb-4">
                        <div class="col-md-6">
                            <label for="price" class="form-label">{{ __('subscriptions.total_price') }} <span class="text-danger">*</span></label>
                            <input type="number" class="form-control" id="price" name="price" min="0" required>
                        </div>
                        <div class="col-md-6">
                            <label for="discount" class="form-label">{{ __('subscriptions.discount') }}</label>
                            <input type="number" class="form-control" id="discount" name="discount" min="0" value="0">
                        </div>
                        @if(auth()->user()?->is_admin)
                            <div class="col-md-6">
                                <label for="sales_employee_id" class="form-label">{{ __('subscriptions.sales_employee') }}</label>
                                <select class="form-select" id="sales_employee_id" name="sales_employee_id">
                                    <option value="">{{ __('common.choose') ?? 'Choose' }}</option>
                                    @foreach(($employees ?? collect()) as $employee)
                                        <option value="{{ $employee->id }}">{{ $employee->full_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        @endif
                    </div>

                    <!-- Renewal Info -->
                    <h6 class="fw-bold mb-3 border-bottom pb-2 mt-4">{{ __('subscriptions.renewal_info') }}</h6>
                    <div class="row g-3 mb-4">
                        <div class="col-md-6">
                            <label for="renewal_due_date" class="form-label">{{ __('subscriptions.renewal_due_date') }}</label>
                            <input type="date" class="form-control" id="renewal_due_date" name="renewal_due_date">
                        </div>
                        <div class="col-md-6">
                            <label for="renewal_amount" class="form-label">{{ __('subscriptions.renewal_amount') }}</label>
                            <input type="number" class="form-control" id="renewal_amount" name="renewal_amount" min="0">
                        </div>
                    </div>

                    <!-- Payment History (Read Only) -->
                    <div id="paymentHistorySection" style="display: none;">
                        <h6 class="fw-bold mb-3 border-bottom pb-2">{{ __('subscriptions.payment_history') }}</h6>
                        <div class="table-responsive mb-4">
                            <table class="table table-sm table-bordered">
                                <thead class="table-light">
                                    <tr>
                                        <th>{{ __('date') }}</th>
                                        <th>{{ __('subscriptions.amount') }}</th>
                                        <th>{{ __('subscriptions.payment_method') }}</th>
                                    </tr>
                                </thead>
                                <tbody id="paymentHistoryBody">
                                    <!-- History items -->
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- Payments -->
                    <div class="d-flex justify-content-between align-items-center mb-3 border-bottom pb-2">
                        <h6 class="fw-bold m-0" id="paymentSectionTitle">{{ __('subscriptions.payments') }}</h6>
                        <button type="button" class="btn btn-sm btn-outline-primary" onclick="addPaymentItem()">
                            <i class="bi bi-plus-lg"></i> {{ __('subscriptions.add_payment') }}
                        </button>
                    </div>
                    <div id="paymentsContainer" class="mb-3">
                        <!-- Dynamic Payments will be added here -->
                    </div>
                </div>
                
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('common.close') }}</button>
                    <button type="submit" class="btn btn-primary">{{ __('common.save') }}</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="quickPaymentModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form id="quickPaymentForm" method="POST" action="">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">{{ __('subscriptions.add_payment') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-12">
                            <label class="form-label">{{ __('subscriptions.invoice_number') }}</label>
                            <input type="text" class="form-control" id="quickPaymentInvoice" readonly>
                        </div>
                        <div class="col-12">
                            <label class="form-label">{{ __('subscriptions.customer_name') }}</label>
                            <input type="text" class="form-control" id="quickPaymentCustomer" readonly>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">{{ __('subscriptions.remaining') }}</label>
                            <input type="number" class="form-control" id="quickPaymentRemaining" readonly>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">{{ __('subscriptions.amount') }}</label>
                            <input type="number" class="form-control" id="quickPaymentAmount" name="amount" min="1" required>
                        </div>
                        <div class="col-12">
                            <label class="form-label">{{ __('subscriptions.payment_method') }}</label>
                            <select class="form-select" id="quickPaymentMethod" name="payment_method" required>
                                <option value="Cash">{{ __('subscriptions.payment_methods.Cash') }}</option>
                                <option value="Zain Cash">{{ __('subscriptions.payment_methods.Zain Cash') }}</option>
                                <option value="POS">{{ __('subscriptions.payment_methods.POS') }}</option>
                                <option value="Qi">{{ __('subscriptions.payment_methods.Qi') }}</option>
                                <option value="Switch">{{ __('subscriptions.payment_methods.Switch') }}</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('common.close') }}</button>
                    <button type="submit" class="btn btn-success">{{ __('common.save') }}</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Delete Modal -->
<div class="modal fade" id="deleteSubscriberModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ __('delete_confirmation_title') ?? 'Confirm Delete' }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                {{ __('delete_confirmation_message') ?? 'Are you sure you want to delete this item?' }}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('common.cancel') ?? 'Cancel' }}</button>
                <form id="deleteForm" method="POST" action="">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger">{{ __('delete') ?? 'Delete' }}</button>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
    let searchTimeout;
    document.getElementById('searchInput').addEventListener('input', function(e) {
        clearTimeout(searchTimeout);
        const query = e.target.value;
        
        searchTimeout = setTimeout(() => {
            fetch(`{{ route('services.web_development.index') }}?service_id={{ $service->id }}&search=${query}`, {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.text())
            .then(html => {
                document.getElementById('subscriptionsList').innerHTML = html;
            });
        }, 300);
    });

    let serviceItemCount = 0;
    let paymentItemCount = 0;

    function addServiceItem() {
        const container = document.getElementById('servicesContainer');
        const index = serviceItemCount++;
        const html = `
            <div class="service-item-row" id="service-item-${index}">
                <button type="button" class="btn btn-sm btn-danger remove-item-btn" onclick="removeServiceItem(${index})">
                    <i class="bi bi-x"></i>
                </button>
                <div class="row g-2">
                    <div class="col-md-5">
                        <label class="form-label small">{{ __('subscriptions.service_details') }}</label>
                        <input type="text" class="form-control" name="items[${index}][service_detail]" required>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label small">{{ __('subscriptions.quantity') }}</label>
                        <input type="number" class="form-control item-quantity" name="items[${index}][quantity]" value="1" min="1" oninput="calculateItemTotal(${index})" required>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label small">{{ __('subscriptions.price') }}</label>
                        <input type="number" class="form-control item-price" name="items[${index}][unit_price]" min="0" oninput="calculateItemTotal(${index})" required>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label small">{{ __('subscriptions.total_price') }}</label>
                        <input type="number" class="form-control item-subtotal" name="items[${index}][subtotal]" min="0" readonly>
                    </div>
                </div>
            </div>
        `;
        container.insertAdjacentHTML('beforeend', html);
    }

    function calculateItemTotal(index) {
        const row = document.getElementById(`service-item-${index}`);
        const quantity = parseFloat(row.querySelector('input[name="items[' + index + '][quantity]"]').value) || 0;
        const price = parseFloat(row.querySelector('input[name="items[' + index + '][unit_price]"]').value) || 0;
        const subtotal = quantity * price;
        
        row.querySelector('input[name="items[' + index + '][subtotal]"]').value = subtotal;
        
        calculateGrandTotal();
    }

    function calculateGrandTotal() {
        let total = 0;
        document.querySelectorAll('input[name$="[subtotal]"]').forEach(input => {
            total += parseFloat(input.value) || 0;
        });
        
        // Update main price field
        const priceField = document.getElementById('price');
        priceField.value = total;
    }

    function removeServiceItem(index) {
        document.getElementById(`service-item-${index}`).remove();
        calculateGrandTotal();
    }

    function addPaymentItem() {
        const container = document.getElementById('paymentsContainer');
        const index = paymentItemCount++;
        const html = `
            <div class="payment-row" id="payment-item-${index}">
                <div class="d-flex gap-2 align-items-end">
                    <div class="flex-grow-1">
                        <label class="form-label small">{{ __('subscriptions.amount') }}</label>
                        <input type="number" class="form-control" name="payments[${index}][amount]" min="0" required>
                    </div>
                    <div class="flex-grow-1">
                        <label class="form-label small">{{ __('subscriptions.payment_method') }}</label>
                        <select class="form-select" name="payments[${index}][payment_method]" required>
                            <option value="Cash">{{ __('subscriptions.payment_methods.Cash') }}</option>
                            <option value="Zain Cash">{{ __('subscriptions.payment_methods.Zain Cash') }}</option>
                            <option value="POS">{{ __('subscriptions.payment_methods.POS') }}</option>
                            <option value="Qi">{{ __('subscriptions.payment_methods.Qi') }}</option>
                            <option value="Switch">{{ __('subscriptions.payment_methods.Switch') }}</option>
                        </select>
                    </div>
                    <button type="button" class="btn btn-danger" onclick="removePaymentItem(${index})">
                        <i class="bi bi-trash"></i>
                    </button>
                </div>
            </div>
        `;
        container.insertAdjacentHTML('beforeend', html);
    }

    function removePaymentItem(index) {
        document.getElementById(`payment-item-${index}`).remove();
    }

    function openEditModal(button) {
        const id = button.getAttribute('data-id');
        const items = JSON.parse(button.getAttribute('data-items'));
        const payments = JSON.parse(button.getAttribute('data-payments') || '[]');
        const data = {
            customer_name: button.getAttribute('data-customer_name'),
            phone: button.getAttribute('data-phone'),
            address: button.getAttribute('data-address'),
            business_name: button.getAttribute('data-business_name'),
            details: button.getAttribute('data-details'),
            price: button.getAttribute('data-price'),
            discount: button.getAttribute('data-discount'),
            renewal_due_date: button.getAttribute('data-renewal_due_date'),
            renewal_amount: button.getAttribute('data-renewal_amount'),
            sales_employee_id: button.getAttribute('data-sales_employee_id'),
        };
        
        const form = document.getElementById('subscriberForm');
        form.action = "{{ route('services.web_development.update', ['id' => '__ID__']) }}".replace('__ID__', id);
        
        document.getElementById('methodField').innerHTML = '<input type="hidden" name="_method" value="PUT">';
        document.getElementById('modalTitle').innerText = "{{ __('subscriptions.edit_subscriber') }}";
        
        document.getElementById('customer_name').value = data.customer_name;
        document.getElementById('phone').value = data.phone;
        document.getElementById('address').value = data.address;
        document.getElementById('business_name').value = data.business_name;
        document.getElementById('details').value = data.details;
        document.getElementById('price').value = data.price;
        document.getElementById('discount').value = data.discount;
        document.getElementById('renewal_due_date').value = data.renewal_due_date;
        document.getElementById('renewal_amount').value = data.renewal_amount;
        const salesEmployeeSelect = document.getElementById('sales_employee_id');
        if (salesEmployeeSelect) {
            salesEmployeeSelect.value = data.sales_employee_id || '';
        }
        
        // Populate items
        document.getElementById('servicesContainer').innerHTML = '';
        serviceItemCount = 0;
        
        items.forEach(item => {
            addServiceItem();
            const index = serviceItemCount - 1;
            const row = document.getElementById(`service-item-${index}`);
            row.querySelector(`input[name="items[${index}][service_detail]"]`).value = item.service_detail;
            row.querySelector(`input[name="items[${index}][quantity]"]`).value = item.quantity;
            row.querySelector(`input[name="items[${index}][unit_price]"]`).value = item.unit_price;
            row.querySelector(`input[name="items[${index}][subtotal]"]`).value = item.subtotal;
        });
        
        // Populate Payment History (Read Only)
        const historySection = document.getElementById('paymentHistorySection');
        const historyBody = document.getElementById('paymentHistoryBody');
        historyBody.innerHTML = '';
        
        if (payments.length > 0) {
            historySection.style.display = 'block';
            payments.forEach(payment => {
                // Payment methods translation map
                const paymentMethods = {
                    'Cash': "{{ __('subscriptions.payment_methods.Cash') }}",
                    'Zain Cash': "{{ __('subscriptions.payment_methods.Zain Cash') }}",
                    'POS': "{{ __('subscriptions.payment_methods.POS') }}",
                    'Qi': "{{ __('subscriptions.payment_methods.Qi') }}",
                    'Switch': "{{ __('subscriptions.payment_methods.Switch') }}"
                };
                
                const methodLabel = paymentMethods[payment.payment_method] || payment.payment_method;
                const date = new Date(payment.created_at).toLocaleDateString('en-CA'); // YYYY-MM-DD
                
                const row = `
                    <tr>
                        <td>${date}</td>
                        <td>${parseFloat(payment.amount).toLocaleString()}</td>
                        <td>${methodLabel}</td>
                    </tr>
                `;
                historyBody.insertAdjacentHTML('beforeend', row);
            });
            
            // Change title for new payments section
            document.getElementById('paymentSectionTitle').innerText = "{{ __('subscriptions.add_new_payment') }}";
        } else {
            historySection.style.display = 'none';
            document.getElementById('paymentSectionTitle').innerText = "{{ __('subscriptions.payments') }}";
        }
        
        // Reset payments container for NEW payments
        document.getElementById('paymentsContainer').innerHTML = '';
        paymentItemCount = 0;
        addPaymentItem(); // Add one empty row for new payment
        
        const modal = new bootstrap.Modal(document.getElementById('addSubscriberModal'));
        modal.show();
    }

    function openDeleteModal(id) {
        const form = document.getElementById('deleteForm');
        form.action = "{{ route('services.web_development.destroy', ['id' => '__ID__']) }}".replace('__ID__', id);
        
        const modal = new bootstrap.Modal(document.getElementById('deleteSubscriberModal'));
        modal.show();
    }

    function resetForm() {
        document.getElementById('subscriberForm').reset();
        document.getElementById('methodField').innerHTML = '';
        document.getElementById('subscriberForm').action = "{{ route('services.web_development.store') }}";
        document.getElementById('modalTitle').innerText = "{{ __('pos.add_customer') }}";
        document.getElementById('servicesContainer').innerHTML = '';
        document.getElementById('paymentsContainer').innerHTML = '';
        serviceItemCount = 0;
        paymentItemCount = 0;
        const salesEmployeeSelect = document.getElementById('sales_employee_id');
        if (salesEmployeeSelect) {
            salesEmployeeSelect.value = '';
        }
        
        // Add one default service item
        addServiceItem();
        // Add one default payment item
        addPaymentItem();
    }

    function openQuickPaymentModal(button) {
        const id = button.getAttribute('data-id');
        const invoice = button.getAttribute('data-invoice_number') || '';
        const customer = button.getAttribute('data-customer_name') || '';
        const remaining = parseInt(button.getAttribute('data-remaining_amount') || '0', 10) || 0;
        const paymentMethod = button.getAttribute('data-payment_method') || 'Cash';

        const form = document.getElementById('quickPaymentForm');
        form.action = "{{ route('subscriptions.payments.store', ['subscription' => '__ID__']) }}".replace('__ID__', id);

        document.getElementById('quickPaymentInvoice').value = invoice;
        document.getElementById('quickPaymentCustomer').value = customer;
        document.getElementById('quickPaymentRemaining').value = remaining;

        const amountEl = document.getElementById('quickPaymentAmount');
        amountEl.value = remaining;
        amountEl.max = String(remaining);

        const methodEl = document.getElementById('quickPaymentMethod');
        const methodExists = Array.from(methodEl.options).some((opt) => opt.value === paymentMethod);
        methodEl.value = methodExists ? paymentMethod : 'Cash';

        bootstrap.Modal.getOrCreateInstance(document.getElementById('quickPaymentModal')).show();
    }

    // Initialize with one item when modal opens? No, resetForm handles it.
</script>
@endpush