@extends('admin.layouts.app')

@section('title', 'Add Service')

@section('content')
<style>
    .form-card    { border-radius:16px; border:1.5px solid #e9ecef; }
    .preview-card { border-radius:16px; border:1.5px solid #e9ecef; position:sticky; top:80px; }
    .styled-label { font-size:.85rem; font-weight:600; color:#374151; margin-bottom:6px; display:block; }
    .styled-input { border:1.5px solid #e5e7eb; border-radius:10px; padding:10px 14px; font-size:.9rem; width:100%; transition:border-color .2s, box-shadow .2s; background:#fff; }
    .styled-input:focus { border-color:#7c3aed; box-shadow:0 0 0 3px rgba(124,58,237,.1); outline:none; }
    .styled-input.is-invalid { border-color:#ef4444; }
    .section-divider { border:none; border-top:1.5px solid #f1f5f9; margin:20px 0; }
    .toggle-switch { position:relative; display:inline-block; width:48px; height:26px; }
    .toggle-switch input { display:none; }
    .toggle-slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background:#d1d5db; border-radius:34px; transition:.3s; }
    .toggle-slider:before { position:absolute; content:""; height:20px; width:20px; left:3px; bottom:3px; background:white; border-radius:50%; transition:.3s; }
    .toggle-switch input:checked + .toggle-slider { background:#7c3aed; }
    .toggle-switch input:checked + .toggle-slider:before { transform:translateX(22px); }
    .submit-btn { background:linear-gradient(135deg,#7c3aed,#4f46e5); border:none; border-radius:10px; padding:11px 28px; font-weight:600; color:white; width:100%; transition:opacity .2s, transform .1s; }
    .submit-btn:hover { opacity:.92; transform:translateY(-1px); }
    .cancel-btn { border:1.5px solid #e5e7eb; border-radius:10px; padding:11px 20px; font-weight:600; color:#64748b; background:white; width:100%; transition:all .2s; }
    .cancel-btn:hover { border-color:#94a3b8; color:#374151; }
    .price-input-wrap { position:relative; }
    .price-input-wrap .currency-prefix { position:absolute; left:14px; top:50%; transform:translateY(-50%); font-weight:700; color:#7c3aed; font-size:.9rem; pointer-events:none; }
    .price-input-wrap input { padding-left:46px; }
    .input-suffix { position:absolute; right:14px; top:50%; transform:translateY(-50%); font-size:.8rem; color:#94a3b8; pointer-events:none; }
    .input-with-suffix { position:relative; }
    /* Preview card */
    .svc-preview { border:1.5px solid #e9ecef; border-radius:14px; overflow:hidden; }
    .svc-preview-header { padding:16px 18px; background:linear-gradient(135deg,#7c3aed,#4f46e5); }
    .svc-preview-body   { padding:18px; background:#fff; }
    .preview-includes-item { display:flex; align-items:center; gap:8px; font-size:.82rem; color:#374151; padding:4px 0; }
    .preview-includes-item i { color:#7c3aed; font-size:.8rem; flex-shrink:0; }
</style>

<div class="container-fluid py-2">

    {{-- Header --}}
    <div class="d-flex align-items-center gap-3 mb-4">
        <a href="{{ route('admin.services.index') }}"
            style="width:38px; height:38px; border-radius:10px; border:1.5px solid #e5e7eb; background:white; display:flex; align-items:center; justify-content:center; color:#374151; text-decoration:none;">
            <i class="bi bi-arrow-left"></i>
        </a>
        <div>
            <h4 class="fw-bold mb-0" style="color:#1e293b;">Add New Service</h4>
            <small class="text-muted">
                <a href="{{ route('admin.services.index') }}" class="text-decoration-none text-muted">Services</a> / Add New
            </small>
        </div>
    </div>

    @if($errors->any())
        <div class="d-flex gap-2 align-items-start mb-4 px-4 py-3"
            style="background:#fef2f2; border:1.5px solid #fecaca; border-radius:12px; color:#dc2626;">
            <i class="bi bi-exclamation-triangle-fill mt-1"></i>
            <div><strong>Please fix:</strong><ul class="mb-0 mt-1">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul></div>
        </div>
    @endif

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

            {{-- LEFT --}}
            <div class="col-lg-7">
                <div class="form-card card p-4">

                    {{-- Category --}}
                    <div class="mb-4">
                        <label class="styled-label">Service Category <span class="text-danger">*</span></label>
                        <select name="service_category_id" id="catSelect"
                            class="styled-input @error('service_category_id') is-invalid @enderror" required>
                            <option value="">— Select a category —</option>
                            @foreach($categories as $cat)
                                <option value="{{ $cat->id }}"
                                    data-icon="{{ $cat->icon }}"
                                    data-name="{{ $cat->name }}"
                                    {{ old('service_category_id') == $cat->id ? 'selected' : '' }}>
                                    {{ $cat->icon }} {{ $cat->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('service_category_id')<div style="color:#ef4444;font-size:.8rem;margin-top:4px;">{{ $message }}</div>@enderror
                    </div>

                    {{-- Name --}}
                    <div class="mb-4">
                        <label class="styled-label">Service Name <span class="text-danger">*</span></label>
                        <input type="text" name="name" id="svcName" value="{{ old('name') }}"
                            class="styled-input @error('name') is-invalid @enderror"
                            placeholder="e.g. Full Engine Tune-Up, Tire Rotation" required autocomplete="off">
                        @error('name')<div style="color:#ef4444;font-size:.8rem;margin-top:4px;">{{ $message }}</div>@enderror
                    </div>

                    {{-- Description --}}
                    <div class="mb-4">
                        <label class="styled-label">Description <span class="text-muted fw-normal">(optional)</span></label>
                        <textarea name="description" id="svcDesc" rows="2"
                            class="styled-input @error('description') is-invalid @enderror"
                            placeholder="Brief description of this service...">{{ old('description') }}</textarea>
                    </div>

                    {{-- Includes --}}
                    <div class="mb-4">
                        <label class="styled-label">What's Included <span class="text-muted fw-normal">(optional)</span></label>
                        <textarea name="includes" id="svcIncludes" rows="3"
                            class="styled-input @error('includes') is-invalid @enderror"
                            placeholder="e.g. Oil filter replacement&#10;Engine oil top-up&#10;Air filter check">{{ old('includes') }}</textarea>
                        <small class="text-muted" style="font-size:.78rem;">One item per line — shown as checklist</small>
                    </div>

                    <hr class="section-divider">

                    {{-- Price + Time --}}
                    <div class="row g-3 mb-4">
                        <div class="col-sm-6">
                            <label class="styled-label">Base Price <span class="text-danger">*</span></label>
                            <div class="price-input-wrap">
                                <span class="currency-prefix">Rs</span>
                                <input type="number" name="base_price" id="svcPrice" value="{{ old('base_price') }}"
                                    class="styled-input @error('base_price') is-invalid @enderror"
                                    placeholder="0" min="0" step="1" required>
                            </div>
                            @error('base_price')<div style="color:#ef4444;font-size:.8rem;margin-top:4px;">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-sm-6">
                            <label class="styled-label">Estimated Time <span class="text-muted fw-normal">(mins)</span></label>
                            <div class="input-with-suffix" style="position:relative;">
                                <input type="number" name="estimated_time" id="svcTime" value="{{ old('estimated_time') }}"
                                    class="styled-input @error('estimated_time') is-invalid @enderror"
                                    placeholder="e.g. 60" min="0">
                                <span class="input-suffix">min</span>
                            </div>
                        </div>
                    </div>

                    {{-- Sort + Active --}}
                    <div class="row g-3 mb-4">
                        <div class="col-sm-6">
                            <label class="styled-label">Sort Order</label>
                            <input type="number" name="sort_order" value="{{ old('sort_order', 0) }}"
                                class="styled-input" min="0">
                        </div>
                        <div class="col-sm-6 d-flex align-items-center">
                            <div class="p-3 rounded-3 w-100 d-flex align-items-center justify-content-between"
                                style="background:#f8fafc; border:1.5px solid #e5e7eb;">
                                <div>
                                    <div class="fw-semibold" style="font-size:.9rem; color:#374151;">Status</div>
                                    <small class="text-muted">Visible to customers</small>
                                </div>
                                <label class="toggle-switch mb-0">
                                    <input type="checkbox" name="is_active" value="1" id="isActive"
                                        {{ old('is_active', '1') ? 'checked' : '' }}>
                                    <span class="toggle-slider"></span>
                                </label>
                            </div>
                        </div>
                    </div>

                    {{-- Buttons --}}
                    <div class="row g-2 mt-2">
                        <div class="col-8">
                            <button type="submit" class="submit-btn">
                                <i class="bi bi-check-lg me-2"></i>Save Service
                            </button>
                        </div>
                        <div class="col-4">
                            <a href="{{ route('admin.services.index') }}" class="cancel-btn text-decoration-none text-center d-block">Cancel</a>
                        </div>
                    </div>

                </div>
            </div>

            {{-- RIGHT: Preview --}}
            <div class="col-lg-5">
                <div class="preview-card card p-4">
                    <div class="fw-bold mb-3" style="font-size:.85rem; color:#94a3b8; text-transform:uppercase; letter-spacing:.05em;">
                        <i class="bi bi-eye me-1"></i> Live Preview
                    </div>

                    <div class="svc-preview">
                        <div class="svc-preview-header">
                            <div style="font-size:.72rem; color:rgba(255,255,255,.7); text-transform:uppercase; letter-spacing:.05em;" id="previewCatLabel">Select a category</div>
                            <div class="fw-bold text-white mt-1" style="font-size:1rem;" id="previewName">Service Name</div>
                        </div>
                        <div class="svc-preview-body">
                            {{-- Price & Time --}}
                            <div class="d-flex align-items-center justify-content-between mb-3">
                                <div>
                                    <div style="font-size:.72rem; color:#94a3b8; text-transform:uppercase; letter-spacing:.04em;">Base Price</div>
                                    <div id="previewPrice" class="fw-bold" style="font-size:1.3rem; color:#059669;">Rs 0</div>
                                </div>
                                <div class="text-end">
                                    <div style="font-size:.72rem; color:#94a3b8; text-transform:uppercase; letter-spacing:.04em;">Est. Time</div>
                                    <div id="previewTime" style="font-size:.9rem; color:#374151; font-weight:600;">— min</div>
                                </div>
                                <div>
                                    <span id="previewStatus" style="background:#dcfce7; color:#15803d; padding:5px 12px; border-radius:20px; font-size:.75rem; font-weight:600;">
                                        <i class="bi bi-circle-fill me-1" style="font-size:.45rem; vertical-align:middle;"></i>Active
                                    </span>
                                </div>
                            </div>

                            {{-- Description --}}
                            <div id="previewDescWrap" style="display:none; margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid #f1f5f9;">
                                <div style="font-size:.8rem; color:#64748b;" id="previewDesc"></div>
                            </div>

                            {{-- Includes --}}
                            <div id="previewIncludesWrap" style="display:none;">
                                <div style="font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#94a3b8; margin-bottom:8px;">What's Included</div>
                                <div id="previewIncludes"></div>
                            </div>

                            <div id="previewEmptyHint" class="text-center py-2" style="color:#94a3b8; font-size:.82rem; font-style:italic;">
                                Fill in the form to see preview
                            </div>
                        </div>
                    </div>

                    <div class="mt-4">
                        <div class="fw-semibold mb-2" style="font-size:.82rem; color:#374151;">
                            <i class="bi bi-lightbulb me-1 text-warning"></i> Tips
                        </div>
                        <ul style="font-size:.8rem; color:#64748b; padding-left:16px; line-height:1.8;">
                            <li>Use clear, customer-friendly service names</li>
                            <li>"What's Included" builds customer trust</li>
                            <li>Accurate estimated time helps scheduling</li>
                            <li>Inactive services won't show to customers</li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>
    </form>
</div>

<script>
function slugify(s){ return s.toLowerCase().replace(/[^a-z0-9\s-]/g,'').replace(/\s+/g,'-').replace(/-+/g,'-').trim(); }

function updatePreviewHint() {
    const hasContent = document.getElementById('svcName').value ||
                       document.getElementById('svcPrice').value ||
                       document.getElementById('svcDesc').value;
    document.getElementById('previewEmptyHint').style.display = hasContent ? 'none' : '';
}

// Name
document.getElementById('svcName').addEventListener('input', function(){
    document.getElementById('previewName').textContent = this.value || 'Service Name';
    updatePreviewHint();
});

// Category
document.getElementById('catSelect').addEventListener('change', function(){
    const opt = this.options[this.selectedIndex];
    document.getElementById('previewCatLabel').textContent = opt.value
        ? (opt.dataset.icon + ' ' + opt.dataset.name)
        : 'Select a category';
});

// Price
document.getElementById('svcPrice').addEventListener('input', function(){
    const v = parseFloat(this.value) || 0;
    document.getElementById('previewPrice').textContent = 'Rs ' + v.toLocaleString('en-PK', {maximumFractionDigits:0});
    updatePreviewHint();
});

// Time
document.getElementById('svcTime').addEventListener('input', function(){
    document.getElementById('previewTime').textContent = this.value ? this.value + ' min' : '— min';
});

// Status
document.getElementById('isActive').addEventListener('change', function(){
    const el = document.getElementById('previewStatus');
    if(this.checked){
        el.style.background='#dcfce7'; el.style.color='#15803d';
        el.innerHTML='<i class="bi bi-circle-fill me-1" style="font-size:.45rem;vertical-align:middle;"></i>Active';
    } else {
        el.style.background='#f1f5f9'; el.style.color='#64748b';
        el.innerHTML='<i class="bi bi-circle me-1" style="font-size:.45rem;vertical-align:middle;"></i>Inactive';
    }
});

// Description
document.getElementById('svcDesc').addEventListener('input', function(){
    const wrap = document.getElementById('previewDescWrap');
    document.getElementById('previewDesc').textContent = this.value;
    wrap.style.display = this.value.trim() ? 'block' : 'none';
    updatePreviewHint();
});

// Includes
document.getElementById('svcIncludes').addEventListener('input', function(){
    const wrap = document.getElementById('previewIncludesWrap');
    const container = document.getElementById('previewIncludes');
    const lines = this.value.split('\n').map(l=>l.trim()).filter(Boolean);
    if(lines.length){
        wrap.style.display='block';
        container.innerHTML = lines.map(l=>
            `<div class="preview-includes-item"><i class="bi bi-check2-circle"></i><span>${l}</span></div>`
        ).join('');
    } else {
        wrap.style.display='none';
        container.innerHTML='';
    }
});
</script>
@endsection