@extends('admin.layout-price')

@section('title', 'Manage Country Prices')
@section('page-title', 'Manage Country Prices')

@section('content')
<div class="row">
    <div class="col-lg-9">
        <form action="{{ route('admin.multi-prices.update', $service->id) }}" method="POST">
            @csrf
            @method('PUT')
            
            <!-- Service Info -->
            <div class="table-card mb-4">
                <div class="table-card-header">
                    <h5 class="table-card-title"><i class="fas fa-info-circle"></i> Service Information</h5>
                </div>
                <div class="p-3">
                    <div class="row g-3">
                        <div class="col-md-8">
                            <label class="form-label">Service Name</label>
                            <input type="text" class="form-control" value="{{ $service->menu_title ?? $service->title }}" readonly>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Service ID</label>
                            <input type="text" class="form-control" value="{{ $service->id }}" readonly>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Country Pricing -->
            <div class="table-card mb-4">
                <div class="table-card-header">
                    <h5 class="table-card-title"><i class="fas fa-globe"></i> Enable Service in Countries</h5>
                </div>
                <div class="p-3">
                    <p class="text-muted mb-3">
                        <i class="fas fa-info-circle"></i> Check the countries where this service should be available and set prices for each.
                    </p>

                    @foreach($countries as $countryCode => $countryData)
                        @php
                            $existingPrice = $existingPrices[$countryCode] ?? null;
                            $isChecked = $existingPrice && $existingPrice->is_active;
                        @endphp
                        
                        <div class="country-price-block mb-4 p-3 border rounded" style="background: #f8fafc;">
                            <div class="form-check mb-3">
                                <input class="form-check-input country-checkbox" 
                                       type="checkbox" 
                                       name="countries[]" 
                                       value="{{ $countryCode }}" 
                                       id="country_{{ $countryCode }}"
                                       {{ $isChecked ? 'checked' : '' }}
                                       onchange="toggleCountryFields('{{ $countryCode }}')">
                                <label class="form-check-label fw-bold" for="country_{{ $countryCode }}" style="font-size: 16px;">
                                    @if($countryCode === 'usa') 🇺🇸
                                    @elseif($countryCode === 'india') 🇮🇳
                                    @elseif($countryCode === 'uk') 🇬🇧
                                    @elseif($countryCode === 'canada') 🇨🇦
                                    @elseif($countryCode === 'australia') 🇦🇺
                                    @endif
                                    {{ $countryData['name'] }}
                                </label>
                            </div>

                            <div id="fields_{{ $countryCode }}" class="country-fields" style="{{ $isChecked ? '' : 'display: none;' }}">
                                <div class="row g-3">
                                    <div class="col-md-4">
                                        <label class="form-label">Currency</label>
                                        <select class="form-select" name="currency[{{ $countryCode }}]">
                                            <option value="{{ $countryData['currency'] }}" selected>
                                                {{ $countryData['currency'] }} - {{ $countryData['name'] }}
                                            </option>
                                        </select>
                                    </div>

                                    <div class="col-md-4">
                                        <label class="form-label">Visament Fee *</label>
                                        <div class="input-group">
                                            <span class="input-group-text">{{ $countryData['currency'] }}</span>
                                            <input type="number" 
                                                   step="0.01" 
                                                   class="form-control visament-fee" 
                                                   name="visament_fee[{{ $countryCode }}]" 
                                                   value="{{ old('visament_fee.'.$countryCode, $existingPrice->visament_fee ?? 0) }}"
                                                   data-country="{{ $countryCode }}"
                                                   onchange="calculateTotal('{{ $countryCode }}')">
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <label class="form-label">Government Fee *</label>
                                        <div class="input-group">
                                            <span class="input-group-text">{{ $countryData['currency'] }}</span>
                                            <input type="number" 
                                                   step="0.01" 
                                                   class="form-control govt-fee" 
                                                   name="government_fee[{{ $countryCode }}]" 
                                                   value="{{ old('government_fee.'.$countryCode, $existingPrice->government_fee ?? 0) }}"
                                                   data-country="{{ $countryCode }}"
                                                   onchange="calculateTotal('{{ $countryCode }}')">
                                        </div>
                                    </div>

                                    <div class="col-12">
                                        <div class="alert alert-success mb-0">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <span><i class="fas fa-calculator"></i> <strong>Total Price:</strong></span>
                                                <span id="total_{{ $countryCode }}" style="font-size: 1.3rem; font-weight: bold;">
                                                    {{ $countryData['currency'] }}{{ number_format(($existingPrice->visament_fee ?? 0) + ($existingPrice->government_fee ?? 0), 2) }}
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            <div class="d-flex gap-2">
                <button type="submit" class="btn btn-primary btn-lg">
                    <i class="fas fa-save"></i> Save All Country Prices
                </button>
                <a href="{{ route('admin.multi-prices.index') }}" class="btn btn-secondary btn-lg">
                    <i class="fas fa-times"></i> Cancel
                </a>
            </div>
        </form>
    </div>

    <div class="col-lg-3">
        <div class="table-card mb-3">
            <div class="table-card-header">
                <h5 class="table-card-title"><i class="fas fa-check-circle"></i> Currently Active</h5>
            </div>
            <div class="p-3">
                @php
                    $activeCountries = collect($existingPrices)->where('is_active', true);
                @endphp
                
                @if($activeCountries->count() > 0)
                    <ul class="list-unstyled mb-0">
                        @foreach($activeCountries as $countryCode => $price)
                            <li class="mb-2">
                                <span class="badge bg-success">
                                    @if($countryCode === 'usa') 🇺🇸
                                    @elseif($countryCode === 'india') 🇮🇳
                                    @elseif($countryCode === 'uk') 🇬🇧
                                    @elseif($countryCode === 'canada') 🇨🇦
                                    @elseif($countryCode === 'australia') 🇦🇺
                                    @endif
                                    {{ strtoupper($countryCode) }}
                                </span>
                                <br>
                                <small>{{ $price->currency }}{{ number_format($price->total_price, 2) }}</small>
                            </li>
                        @endforeach
                    </ul>
                @else
                    <p class="text-muted mb-0">
                        <i class="fas fa-times-circle"></i> Not available in any country yet
                    </p>
                @endif
            </div>
        </div>

        <div class="table-card">
            <div class="table-card-header">
                <h5 class="table-card-title"><i class="fas fa-lightbulb"></i> Tips</h5>
            </div>
            <div class="p-3">
                <ul class="list-unstyled mb-0">
                    <li class="mb-2">
                        <i class="fas fa-check text-success"></i> Check country to enable service
                    </li>
                    <li class="mb-2">
                        <i class="fas fa-check text-success"></i> Set different prices per country
                    </li>
                    <li class="mb-2">
                        <i class="fas fa-check text-success"></i> Currency auto-sets for country
                    </li>
                    <li class="mb-2">
                        <i class="fas fa-check text-success"></i> Changes apply immediately to checkout
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function toggleCountryFields(country) {
    const checkbox = document.getElementById('country_' + country);
    const fields = document.getElementById('fields_' + country);
    fields.style.display = checkbox.checked ? 'block' : 'none';
}

function calculateTotal(country) {
    const visamentFee = parseFloat(document.querySelector(`.visament-fee[data-country="${country}"]`).value) || 0;
    const govtFee = parseFloat(document.querySelector(`.govt-fee[data-country="${country}"]`).value) || 0;
    const total = visamentFee + govtFee;
    
    const currencySymbol = document.querySelector(`select[name="currency[${country}]"]`).value;
    document.getElementById('total_' + country).textContent = currencySymbol + total.toFixed(2);
}

// Initialize totals on page load
document.addEventListener('DOMContentLoaded', function() {
    const countries = ['usa', 'india', 'uk', 'canada', 'australia'];
    countries.forEach(country => {
        if (document.getElementById('country_' + country).checked) {
            calculateTotal(country);
        }
    });
});
</script>
@endpush