@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">Create Service</h5>
    </div>

    <div class="card-body">
      <form method="POST" action="{{ route('admin.services.store') }}" class="row g-3" id="createServiceForm">
        @csrf

        <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') === (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-secondary fw-bold" id="countryBadgeCount">0 Countries Selected</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="" 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', '') }}">
          <input type="hidden" name="country" id="primaryCountryInput" value="{{ old('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') }}" 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') }}" 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') }}" 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') }}</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>
            <label class="form-check-label">Active</label>
          </div>
        @else
          <div class="col-12 mt-3">
            <div class="alert alert-warning mb-0">
              New service will be created as <strong>Pending</strong>. Admin or Super Admin will activate it.
            </div>
          </div>
        @endif

        @if($categories->isEmpty())
          <div class="col-12">
            <div class="alert alert-danger mb-0">
              No category available. Create your category first.
            </div>
          </div>
        @endif

        <div class="col-12 mt-4">
          <button class="btn btn-primary btn-lg px-4" @disabled($categories->isEmpty())>Save Service &amp; Plans</button>
        </div>
      </form>
    </div>
  </div>
</div>

@include('admin.services.country-pricing-modal')

<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 updateRowTotal(idx) {
    // Row total preview removed
}

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
    @else
        // Pre-populate with available plans
        if (availablePlans.length > 0) {
            availablePlans.forEach(plan => {
                addPlanRow(plan);
            });
        }
    @endif
});
</script>
@endsection