@extends('layouts.app')
@section('title','Book an Appointment — Rukay\'s')
@section('content')
<style>
.booking-hero { background:linear-gradient(135deg,#2C1810,#8B3252); color:#fff; padding:3rem 0; text-align:center; }
.booking-hero h1 { font-size:2.4rem; margin-bottom:.5rem; }
.booking-steps { display:flex; justify-content:center; gap:0; margin:2.5rem 0; position:relative; }
.step { display:flex; flex-direction:column; align-items:center; flex:1; max-width:140px; }
.step-circle { width:36px; height:36px; border-radius:50%; background:#E8D5C4; color:#7A6058; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.9rem; position:relative; z-index:1; transition:all .3s; }
.step.active .step-circle { background:#8B3252; color:#fff; }
.step.done .step-circle { background:#059669; color:#fff; }
.step-label { font-size:.75rem; color:#7A6058; margin-top:.35rem; }
.step.active .step-label { color:#8B3252; font-weight:600; }
.step-connector { flex:1; height:2px; background:#E8D5C4; align-self:center; margin-top:-1.3rem; max-width:80px; }
.booking-form { background:#fff; border-radius:.75rem; border:1px solid #E8D5C4; padding:2rem; max-width:860px; margin:0 auto 4rem; }
.service-pick-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1rem; }
.service-pick-card { border:2px solid #E8D5C4; border-radius:.5rem; padding:1rem; cursor:pointer; transition:all .2s; }
.service-pick-card:hover { border-color:#8B3252; background:#fdf0f5; }
.service-pick-card.selected { border-color:#8B3252; background:#fdf0f5; }
.service-pick-card h4 { font-size:.95rem; margin-bottom:.25rem; }
.service-pick-card .price { color:#8B3252; font-weight:700; }
.service-pick-card .dur { font-size:.78rem; color:#7A6058; }
.time-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); gap:.65rem; margin-top:1rem; }
.time-slot { border:1.5px solid #E8D5C4; border-radius:.375rem; padding:.5rem; text-align:center; font-size:.85rem; cursor:pointer; transition:all .2s; background:#fff; }
.time-slot:hover:not(.unavailable) { border-color:#8B3252; background:#fdf0f5; }
.time-slot.selected { background:#8B3252; color:#fff; border-color:#8B3252; }
.time-slot.unavailable { background:#f8f8f8; color:#ccc; cursor:not-allowed; text-decoration:line-through; }
.step-panel { display:none; }
.step-panel.active { display:block; }
.booking-summary { background:#fdf6f0; border-radius:.5rem; border:1px solid #E8D5C4; padding:1.25rem; margin-bottom:1.5rem; }
.summary-row { display:flex; justify-content:space-between; padding:.35rem 0; font-size:.9rem; border-bottom:1px solid #E8D5C4; }
.summary-row:last-child { border-bottom:none; font-weight:700; color:#8B3252; font-size:1rem; }
.coupon-row { display:flex; gap:.75rem; }
.coupon-row input { flex:1; }
</style>
<div class="booking-hero"><div class="container"><h1>Book Your Appointment</h1><p>Select your service, choose a time, and confirm your booking in minutes.</p></div></div>
<div class="container">
    <div class="booking-steps">
        <div class="step active" id="step-ind-1"><div class="step-circle">1</div><div class="step-label">Service</div></div>
        <div class="step-connector"></div>
        <div class="step" id="step-ind-2"><div class="step-circle">2</div><div class="step-label">Time</div></div>
        <div class="step-connector"></div>
        <div class="step" id="step-ind-3"><div class="step-circle">3</div><div class="step-label">Details</div></div>
        <div class="step-connector"></div>
        <div class="step" id="step-ind-4"><div class="step-circle">4</div><div class="step-label">Review</div></div>
    </div>
    <div class="booking-form">
        <form method="POST" action="{{ route('booking.store') }}" id="booking-form">
            @csrf
            <input type="hidden" name="service_id" id="inp-service">
            <input type="hidden" name="staff_id" id="inp-staff">
            <input type="hidden" name="appointment_date" id="inp-date">
            <input type="hidden" name="appointment_time" id="inp-time">

            <!-- Step 1: Service -->
            <div class="step-panel active" id="panel-1">
                <h2 style="font-size:1.4rem;color:#8B3252;margin-bottom:1.25rem;">Select a Service</h2>
                <div class="service-pick-grid">
                    @foreach($services as $s)
                    <div class="service-pick-card" data-id="{{ $s->id }}" data-name="{{ $s->name }}" data-price="{{ $s->price }}" data-dur="{{ $s->duration_minutes }}" onclick="pickService(this)">
                        <h4>{{ $s->name }}</h4>
                        <div class="price">₵{{ number_format($s->price,2) }}</div>
                        <div class="dur">{{ $s->duration_minutes }} min &middot; {{ $s->category }}</div>
                    </div>
                    @endforeach
                </div>
                <div style="margin-top:1.5rem;text-align:right;"><button type="button" class="btn btn-primary" onclick="goStep(2)">Next: Choose Time</button></div>
            </div>

            <!-- Step 2: Date/Time/Staff -->
            <div class="step-panel" id="panel-2">
                <h2 style="font-size:1.4rem;color:#8B3252;margin-bottom:1.25rem;">Choose Date & Time</h2>
                <div class="grid-2" style="gap:1.5rem;margin-bottom:1.5rem;">
                    <div class="form-group"><label>Date</label><input type="date" id="pick-date" min="{{ date('Y-m-d') }}" onchange="loadSlots()"></div>
                    <div class="form-group"><label>Preferred Staff (Optional)</label>
                        <select id="pick-staff" onchange="loadSlots()">
                            <option value="">Any available stylist</option>
                            @foreach($staff as $sm)<option value="{{ $sm->id }}">{{ $sm->name }} — {{ $sm->role }}</option>@endforeach
                        </select>
                    </div>
                </div>
                <div id="slots-wrap" style="display:none;">
                    <div style="font-weight:600;margin-bottom:.5rem;font-size:.9rem;">Available Times</div>
                    <div class="time-grid" id="time-grid"></div>
                </div>
                <div id="slots-loading" style="display:none;color:#7A6058;font-size:.9rem;">Loading available times...</div>
                <div style="display:flex;justify-content:space-between;margin-top:1.75rem;">
                    <button type="button" class="btn btn-outline" onclick="goStep(1)">Back</button>
                    <button type="button" class="btn btn-primary" onclick="goStep(3)">Next: Your Details</button>
                </div>
            </div>

            <!-- Step 3: Personal Details -->
            <div class="step-panel" id="panel-3">
                <h2 style="font-size:1.4rem;color:#8B3252;margin-bottom:1.25rem;">Your Details</h2>
                <div class="grid-2" style="gap:1.25rem;">
                    <div class="form-group"><label>Full Name <span style="color:#dc2626">*</span></label><input type="text" name="client_name" required value="{{ auth()->user()?->name ?? old('client_name') }}" placeholder="Akosua Mensah"></div>
                    <div class="form-group"><label>Email <span style="color:#dc2626">*</span></label><input type="email" name="client_email" required value="{{ auth()->user()?->email ?? old('client_email') }}" placeholder="you@example.com"></div>
                    <div class="form-group"><label>Phone <span style="color:#dc2626">*</span></label><input type="tel" name="client_phone" required value="{{ auth()->user()?->phone ?? old('client_phone') }}" placeholder="+233 244 000 000"></div>
                    <div class="form-group"><label>Notes (Optional)</label><input type="text" name="notes" placeholder="Any special requests..."></div>
                </div>
                <div class="form-group" style="margin-top:.5rem;">
                    <label>Coupon Code (Optional)</label>
                    <div class="coupon-row">
                        <input type="text" name="coupon_code" id="coupon-input" placeholder="e.g. WELCOME10" style="text-transform:uppercase">
                        <button type="button" class="btn btn-outline btn-sm" onclick="applyCoupon()">Apply</button>
                    </div>
                    <div id="coupon-msg" style="font-size:.85rem;margin-top:.4rem;"></div>
                </div>
                <div style="display:flex;justify-content:space-between;margin-top:1.75rem;">
                    <button type="button" class="btn btn-outline" onclick="goStep(2)">Back</button>
                    <button type="button" class="btn btn-primary" onclick="goStep(4)">Review Booking</button>
                </div>
            </div>

            <!-- Step 4: Review -->
            <div class="step-panel" id="panel-4">
                <h2 style="font-size:1.4rem;color:#8B3252;margin-bottom:1.25rem;">Review Your Booking</h2>
                <div class="booking-summary" id="summary-content"></div>
                @if($errors->any())<div class="alert alert-error">{{ $errors->first() }}</div>@endif
                <div style="display:flex;justify-content:space-between;margin-top:1rem;">
                    <button type="button" class="btn btn-outline" onclick="goStep(3)">Back</button>
                    <button type="submit" class="btn btn-primary" style="padding:.75rem 2rem;">Confirm Booking</button>
                </div>
            </div>
        </form>
    </div>
</div>
@push('scripts')
<script>
let currentStep=1, selService=null, selTime=null, discount=0;
const urlParams = new URLSearchParams(window.location.search);
if(urlParams.get('service')) {
    document.addEventListener('DOMContentLoaded',()=>{
        const card = document.querySelector(`.service-pick-card[data-id="${urlParams.get('service')}"]`);
        if(card) { pickService(card); setTimeout(()=>goStep(2),100); }
    });
}
function pickService(el) {
    document.querySelectorAll('.service-pick-card').forEach(c=>c.classList.remove('selected'));
    el.classList.add('selected');
    selService = {id:el.dataset.id, name:el.dataset.name, price:parseFloat(el.dataset.price), dur:el.dataset.dur};
    document.getElementById('inp-service').value=selService.id;
}
function goStep(n) {
    if(n===2 && !selService) { alert('Please select a service first.'); return; }
    if(n===3 && !selTime) { alert('Please select a date and time.'); return; }
    if(n===4) buildSummary();
    document.querySelectorAll('.step-panel').forEach(p=>p.classList.remove('active'));
    document.getElementById('panel-'+n).classList.add('active');
    document.querySelectorAll('.step').forEach((s,i)=>{
        s.classList.remove('active','done');
        if(i+1===n) s.classList.add('active');
        else if(i+1<n) s.classList.add('done');
    });
    currentStep=n;
}
function loadSlots() {
    const date=document.getElementById('pick-date').value;
    const staffId=document.getElementById('pick-staff').value;
    if(!date) return;
    document.getElementById('slots-wrap').style.display='none';
    document.getElementById('slots-loading').style.display='block';
    fetch(`{{ route('booking.availability') }}?date=${date}&staff_id=${staffId}`)
        .then(r=>r.json()).then(slots=>{
            const grid=document.getElementById('time-grid');
            grid.innerHTML='';
            slots.forEach(s=>{
                const d=document.createElement('div');
                d.className='time-slot'+(s.available?'':' unavailable');
                d.textContent=s.time;
                if(s.available) d.onclick=()=>pickTime(d,s.time);
                grid.appendChild(d);
            });
            document.getElementById('slots-loading').style.display='none';
            document.getElementById('slots-wrap').style.display='block';
        });
}
function pickTime(el, time) {
    document.querySelectorAll('.time-slot').forEach(t=>t.classList.remove('selected'));
    el.classList.add('selected');
    selTime=time;
    document.getElementById('inp-time').value=time;
    document.getElementById('inp-date').value=document.getElementById('pick-date').value;
    document.getElementById('inp-staff').value=document.getElementById('pick-staff').value;
}
function applyCoupon() {
    const code=document.getElementById('coupon-input').value.trim();
    if(!code||!selService) return;
    fetch('{{ route("booking.validate-coupon") }}',{method:'POST',headers:{'Content-Type':'application/json','X-CSRF-TOKEN':document.querySelector('meta[name=csrf-token]').content},body:JSON.stringify({code,order_amount:selService.price})})
        .then(r=>r.json()).then(d=>{
            const msg=document.getElementById('coupon-msg');
            if(d.valid) {
                discount = d.discount_type==='percentage' ? selService.price*d.discount_value/100 : d.discount_value;
                msg.style.color='#059669'; msg.textContent=d.message+' (−₵'+discount.toFixed(2)+')';
            } else { discount=0; msg.style.color='#dc2626'; msg.textContent=d.message; }
        });
}
function buildSummary() {
    const name=document.querySelector('[name=client_name]').value;
    const email=document.querySelector('[name=client_email]').value;
    const phone=document.querySelector('[name=client_phone]').value;
    const date=document.getElementById('pick-date').value;
    const staffOpt=document.getElementById('pick-staff');
    const staffName=staffOpt.options[staffOpt.selectedIndex]?.text||'Any stylist';
    const total = selService ? selService.price - discount : 0;
    document.getElementById('summary-content').innerHTML=`
        <div class="summary-row"><span>Service</span><span>${selService?.name||'—'}</span></div>
        <div class="summary-row"><span>Date & Time</span><span>${date} at ${selTime||'—'}</span></div>
        <div class="summary-row"><span>Staff</span><span>${staffName}</span></div>
        <div class="summary-row"><span>Client</span><span>${name} (${phone})</span></div>
        ${discount>0?`<div class="summary-row"><span>Discount</span><span style="color:#059669">−₵${discount.toFixed(2)}</span></div>`:''}
        <div class="summary-row"><span>Total</span><span>₵${total.toFixed(2)}</span></div>
    `;
}
</script>
@endpush
@endsection