@extends('admin.layouts.app')
@section('title', 'Create AMC Contract')
@section('content')
<div class="form-card"><h2>Create AMC Contract</h2>
@if($errors->any())<div class="alert alert-danger">{{ $errors->first() }}</div>@endif
<form method="POST" action="{{ route('admin.amc.store') }}">@csrf<div class="form-grid">
<div class="form-group"><label>Customer *</label><select name="customer_id" required><option value="">Select Customer</option>@foreach($customers as $customer)<option value="{{ $customer->id }}" {{ old('customer_id') == $customer->id ? 'selected' : '' }}>{{ $customer->customer_name }} - {{ $customer->mobile }}</option>@endforeach</select></div>
<div class="form-group">
    <label>Service Types * <small>(select one or more)</small></label>
    <div class="amc-service-picker" id="servicePicker">
        <button type="button" class="amc-service-trigger" id="serviceTrigger" aria-expanded="false">
            <span id="servicePlaceholder">Select service types</span><i class="fas fa-chevron-down"></i>
        </button>
        <div class="amc-selected-services" id="selectedServices"></div>
        <div class="amc-service-menu" id="serviceMenu">
            <input type="search" id="serviceSearch" placeholder="Search services..." autocomplete="off">
            <div class="amc-service-options">
                @foreach($serviceTypes as $serviceType)
                    <label class="amc-service-option" data-name="{{ strtolower($serviceType->name) }}">
                        <input type="checkbox" name="service_type[]" value="{{ $serviceType->name }}" {{ in_array($serviceType->name, old('service_type', []), true) ? 'checked' : '' }}>
                        <span>{{ $serviceType->name }}</span>
                    </label>
                @endforeach
            </div>
        </div>
    </div>
</div>
<div class="form-group"><label>Start Date *</label><input type="date" name="start_date" value="{{ old('start_date') }}" required></div>
<div class="form-group"><label>End Date *</label><input type="date" name="end_date" value="{{ old('end_date') }}" required></div>
<div class="form-group"><label>Total Scheduled Visits *</label><input type="number" name="total_visits" min="1" max="100" value="{{ old('total_visits', 4) }}" required></div>
<div class="form-group"><label>Contract Amount *</label><input type="number" name="contract_amount" min="0" step="0.01" value="{{ old('contract_amount') }}" required></div>
<div class="form-group full"><label>Terms & Notes</label><textarea name="terms">{{ old('terms') }}</textarea></div>
</div><div class="form-actions"><button class="btn-primary">Create Contract</button><a href="{{ route('admin.amc.index') }}" class="btn-secondary">Cancel</a></div></form></div>
<style>
.amc-service-picker{position:relative}.amc-service-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;border:1px solid #cbd5e1;background:#f8fafc;border-radius:10px;padding:12px 14px;font-size:14px;color:#64748b;cursor:pointer}.amc-service-trigger.open{border-color:#16a34a;box-shadow:0 0 0 4px rgba(22,163,74,.12);background:#fff}.amc-service-menu{display:none;position:absolute;left:0;right:0;top:50px;z-index:50;padding:10px;background:#fff;border:1px solid #cbd5e1;border-radius:10px;box-shadow:0 14px 32px rgba(15,23,42,.15)}.amc-service-menu.show{display:block}.amc-service-menu>input{margin-bottom:8px}.amc-service-options{max-height:210px;overflow-y:auto}.amc-service-option{display:flex!important;align-items:center;gap:10px;margin:0!important;padding:10px;border-radius:8px;cursor:pointer}.amc-service-option:hover,.amc-service-option:has(input:checked){background:#ecfdf5;color:#047857}.amc-service-option input{width:auto!important}.amc-selected-services{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}.amc-service-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 9px;border-radius:20px;background:#dcfce7;color:#166534;font-size:12px;font-weight:600}.amc-service-chip button{border:0;background:transparent;color:inherit;cursor:pointer;padding:0}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const picker = document.getElementById('servicePicker');
    const trigger = document.getElementById('serviceTrigger');
    const menu = document.getElementById('serviceMenu');
    const search = document.getElementById('serviceSearch');
    const selectedBox = document.getElementById('selectedServices');
    const placeholder = document.getElementById('servicePlaceholder');
    const options = Array.from(picker.querySelectorAll('.amc-service-option'));

    function renderSelected() {
        const checked = options.filter(option => option.querySelector('input').checked);
        selectedBox.innerHTML = '';
        placeholder.textContent = checked.length ? checked.length + ' service(s) selected' : 'Select service types';
        checked.forEach(function (option) {
            const input = option.querySelector('input');
            const chip = document.createElement('span');
            chip.className = 'amc-service-chip';
            chip.append(document.createTextNode(input.value));
            const remove = document.createElement('button');
            remove.type = 'button'; remove.innerHTML = '&times;'; remove.setAttribute('aria-label', 'Remove ' + input.value);
            remove.addEventListener('click', function () { input.checked = false; renderSelected(); });
            chip.appendChild(remove); selectedBox.appendChild(chip);
        });
    }

    trigger.addEventListener('click', function () {
        const open = menu.classList.toggle('show'); trigger.classList.toggle('open', open); trigger.setAttribute('aria-expanded', open);
        if (open) search.focus();
    });
    options.forEach(option => option.querySelector('input').addEventListener('change', renderSelected));
    search.addEventListener('input', function () {
        const term = this.value.trim().toLowerCase();
        options.forEach(option => option.style.display = option.dataset.name.includes(term) ? 'flex' : 'none');
    });
    document.addEventListener('click', function (event) {
        if (!picker.contains(event.target)) { menu.classList.remove('show'); trigger.classList.remove('open'); trigger.setAttribute('aria-expanded', 'false'); }
    });
    renderSelected();
});
</script>
@endsection