@extends('layouts.app')

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
  <div class="card">
    <div class="card-header">
      <h5 class="mb-0">Edit Service: {{ $service->name }}</h5>
    </div>

    <div class="card-body">
      <form method="POST" action="{{ route('admin.services.update', $service) }}" class="row g-3" id="editServiceForm">
        @csrf
        @method('PUT')

        <div class="col-md-6">
          <label class="form-label">Category</label>
          <select name="category_id" class="form-select" required>
            @foreach($categories as $category)
              <option value="{{ $category->id }}" @selected((int) old('category_id', $service->category_id) === (int) $category->id)>
                {{ $category->name }}
              </option>
            @endforeach
          </select>
        </div>

        <div class="col-md-6">
          <label class="form-label d-flex justify-content-between align-items-center">
            <span>Select Countries &amp; Monthly Price</span>
            <span class="badge bg-label-warning fw-bold" id="countryBadgeCount">{{ $service->country ?: 'Configure Countries' }}</span>
          </label>
          <div class="input-group" id="openCountryModalTrigger" style="cursor: pointer;">
            <span class="input-group-text bg-dark text-warning border-secondary"><i class="fa-solid fa-globe"></i></span>
            <input type="text" class="form-control cursor-pointer" id="countryDisplayInput" readonly 
                   placeholder="Click to select countries..." 
                   value="{{ $service->country ?: 'Click to select countries' }}" 
                   style="cursor: pointer; font-weight: 600; background: #fff;">
            <button class="btn btn-warning d-flex align-items-center gap-1" type="button" id="btnOpenCountryModal">
              <i class="fa-solid fa-pen-to-square"></i> Select Countries
            </button>
          </div>
          <small class="text-muted">Click anywhere to select the countries where this service will be available.</small>
          
          {{-- Hidden fields for form submission --}}
          <input type="hidden" name="selected_countries" id="selectedCountriesJson" value="{{ old('selected_countries', json_encode([['country' => $service->country, 'flag' => 'fi fi-gb', 'price' => (float) ($service->price ?? 8.00), 'enabled' => true]])) }}">
          <input type="hidden" name="country" id="primaryCountryInput" value="{{ old('country', $service->country) }}">

          {{-- Live Preview Badges --}}
          <div class="mt-2 d-flex flex-wrap gap-1" id="selectedCountriesPreview" style="max-height: 85px; overflow-y: auto;">
          </div>
        </div>

        <div class="col-md-6">
          <label class="form-label">Name</label>
          <input name="name" class="form-control" value="{{ old('name', $service->name) }}" required placeholder="e.g. Netflix, Spotify, Canva">
        </div>

        <div class="col-md-6">
          <label class="form-label">Slug</label>
          <input name="slug" class="form-control" value="{{ old('slug', $service->slug) }}" placeholder="e.g. netflix">
        </div>

        <div class="col-md-12">
          <label class="form-label">Logo URL</label>
          <input name="logo" class="form-control" value="{{ old('logo', $service->logo) }}" placeholder="https://example.com/logo.png">
          <small class="text-muted">This image will show on packages created under this service.</small>
        </div>

        <div class="col-12">
          <label class="form-label">Description</label>
          <textarea name="description" class="form-control" rows="2">{{ old('description', $service->description) }}</textarea>
        </div>

        {{-- Service Plans & Pricing Builder --}}
        <div class="col-12 mt-4">
          <div class="card border rounded-3 p-3 bg-light shadow-none">
            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
              <div>
                <h6 class="fw-bold mb-0 text-dark"><i class="fa-solid fa-layer-group text-primary me-2"></i>Service Plans &amp; Pricing</h6>
                <small class="text-muted">Monthly Price ($) is entered per <strong>Country</strong> in the popup above. <strong>Admin Fee ($)</strong> and Slots are configured per plan below.</small>
              </div>
              <div>
                <a href="{{ route('admin.service-plans.create') }}" target="_blank" class="btn btn-xs btn-outline-primary">
                  <i class="fa-solid fa-plus me-1"></i>Create New Plan in Service Plans
                </a>
              </div>
            </div>

            <!-- Plan Picker from Service Plans -->
            <div class="card border p-3 bg-white mb-3 rounded-3 shadow-none">
              <label class="form-label small fw-bold mb-1"><i class="fa-solid fa-list-check text-primary me-1"></i>Select Plan from Service Plans</label>
              <div class="row g-2 align-items-center">
                <div class="col-md-9 col-sm-8">
                  <select id="planPickerSelect" class="form-select form-select-sm">
                    <option value="">-- Choose a plan to attach to this service --</option>
                    @foreach($availablePlans as $ap)
                      <option value="{{ $ap['id'] }}">
                        {{ $ap['name'] }} — Admin Fee: ${{ number_format($ap['admin_fee'], 2) }} ({{ $ap['max_slots'] }} slots)
                      </option>
                    @endforeach
                  </select>
                </div>
                <div class="col-md-3 col-sm-4">
                  <button type="button" class="btn btn-sm btn-primary w-100" onclick="addSelectedPlan()">
                    <i class="fa-solid fa-plus me-1"></i> Add Plan to Service
                  </button>
                </div>
              </div>
              @if(empty($availablePlans))
                <div class="alert alert-warning py-2 px-3 small mt-2 mb-0">
                  <i class="fa-solid fa-circle-exclamation me-1"></i> No service plans found. Please <a href="{{ route('admin.service-plans.create') }}" target="_blank" class="fw-bold alert-link">create a plan in Service Plans</a> first.
                </div>
              @endif
            </div>

            <div id="servicePlansContainer" class="d-flex flex-column gap-2">
              <!-- Plan rows injected dynamically -->
            </div>
          </div>
        </div>

        @if($isAdminOrSuper)
          <div class="col-12 form-check mt-3">
            <input class="form-check-input" type="checkbox" name="is_active" value="1" @checked($service->is_active)>
            <label class="form-check-label">Active</label>
          </div>
        @else
          <div class="col-md-6 mt-3">
            <label class="form-label">Status</label>
            <div>
              <span class="badge bg-label-{{ $service->is_active ? 'success' : 'warning' }}">
                {{ $service->is_active ? 'Active' : 'Pending' }}
              </span>
            </div>
          </div>
        @endif

        <div class="col-12 mt-4">
          <button class="btn btn-primary btn-lg px-4">Update Service &amp; Plans</button>
        </div>
      </form>

      <form method="POST" action="{{ route('admin.services.destroy', $service) }}" class="mt-3">
        @csrf
        @method('DELETE')
        <button class="btn btn-outline-danger" onclick="return confirm('Are you sure you want to delete this service and unlink its plans?');">
          <i class="fa-solid fa-trash-can me-1"></i> Delete Service
        </button>
      </form>
    </div>
  </div>
</div>

@include('admin.services.country-pricing-modal', ['service' => $service])

<script>
let planRowIndex = 0;
const availablePlans = {!! json_encode($availablePlans) !!};
const addedPlanIds = new Set();

function escapeHtml(text) {
    if (!text) return '';
    return String(text)
        .replace(/&/g, "&amp;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "&#039;");
}

function addPlanRow(plan) {
    if (!plan || !plan.name) return;

    const container = document.getElementById('servicePlansContainer');
    if (!container) return;

    const planId = plan.id ? parseInt(plan.id, 10) : 0;
    if (planId && addedPlanIds.has(planId)) {
        alert(`"${plan.name}" is already added.`);
        return;
    }

    if (planId) {
        addedPlanIds.add(planId);
    }

    const price = parseFloat(plan.price) || 0;
    const adminFee = parseFloat(plan.admin_fee) || 0;
    const maxSlots = parseInt(plan.max_slots, 10) || 4;
    const isActive = (plan.is_active !== undefined && plan.is_active !== null) ? Number(plan.is_active) : 1;

    const idx = planRowIndex++;
    const row = document.createElement('div');
    row.className = 'plan-row card p-3 border rounded-3 bg-white shadow-sm';
    row.id = `plan-row-${idx}`;
    row.innerHTML = `
      <div class="row g-2 align-items-center">
        <div class="col-md-5 col-sm-12">
          <label class="form-label small fw-bold mb-1">Plan Name</label>
          <input type="hidden" name="plans[${idx}][plan_id]" value="${planId}">
          <input type="hidden" name="plans[${idx}][price]" id="price_${idx}" value="${price.toFixed(2)}">
          <input type="text" name="plans[${idx}][name]" class="form-control form-control-sm bg-light fw-bold text-dark" value="${escapeHtml(plan.name)}" readonly>
        </div>
        <div class="col-md-4 col-sm-6">
          <label class="form-label small fw-bold mb-1 text-primary">
            <i class="fa-solid fa-coins me-1"></i>Admin Fee ($) <span class="text-danger">*</span>
          </label>
          <div class="input-group input-group-sm">
            <span class="input-group-text bg-primary-subtle text-primary fw-bold">$</span>
            <input type="number" step="0.01" min="0" name="plans[${idx}][admin_fee]" id="admin_fee_${idx}" class="form-control form-control-sm fw-bold border-primary-subtle text-primary" value="${adminFee.toFixed(2)}" placeholder="0.00" required>
          </div>
          <div class="text-muted" style="font-size: 10px;">Platform fee charged on this plan</div>
        </div>
        <div class="col-md-2 col-sm-4">
          <label class="form-label small fw-bold mb-1">Slots <span class="text-danger">*</span></label>
          <input type="number" min="1" max="50" name="plans[${idx}][max_slots]" class="form-control form-control-sm" value="${maxSlots}" required>
        </div>
        <div class="col-md-1 col-sm-2 text-end">
          <label class="form-label small d-block mb-1">&nbsp;</label>
          <button type="button" class="btn btn-sm btn-outline-danger" onclick="removePlanRow('plan-row-${idx}', ${planId})" title="Remove Plan from Service">
            <i class="fa-solid fa-trash-can"></i>
          </button>
        </div>
      </div>
    `;
    container.appendChild(row);
}

function removePlanRow(rowId, planId) {
    const row = document.getElementById(rowId);
    if (row) {
        const container = document.getElementById('servicePlansContainer');
        if (container.querySelectorAll('.plan-row').length <= 1) {
            alert('A service must have at least one plan.');
            return;
        }
        row.remove();
        if (planId) {
            addedPlanIds.delete(planId);
        }
    }
}

function addSelectedPlan() {
    const picker = document.getElementById('planPickerSelect');
    if (!picker || !picker.value) {
        alert('Please choose a plan from the dropdown first.');
        return;
    }
    const planId = parseInt(picker.value, 10);
    const plan = availablePlans.find(p => p.id === planId);
    if (!plan) return;

    addPlanRow(plan);
    picker.value = '';
}

document.addEventListener('DOMContentLoaded', function () {
    @if(old('plans') && is_array(old('plans')))
        @foreach(old('plans') as $oldP)
            addPlanRow({
                id: {{ (int) ($oldP['plan_id'] ?? $oldP['id'] ?? 0) }},
                name: "{{ addslashes($oldP['name'] ?? '') }}",
                price: {{ (float) ($oldP['price'] ?? 0) }},
                admin_fee: {{ (float) ($oldP['admin_fee'] ?? 0) }},
                max_slots: {{ (int) ($oldP['max_slots'] ?? 4) }},
                is_active: {{ !empty($oldP['is_active']) ? 1 : 0 }}
            });
        @endforeach
    @elseif(!empty($assignedPlans) && count($assignedPlans) > 0)
        const assigned = {!! json_encode($assignedPlans) !!};
        assigned.forEach(plan => {
            addPlanRow(plan);
        });
    @else
        if (availablePlans.length > 0) {
            availablePlans.forEach(plan => {
                addPlanRow(plan);
            });
        }
    @endif
});
</script>
@endsection