@extends('customer.layouts.app')

@section('title', 'Booking Details')

@section('content')
<div class="module-heading heading-actions">
    <div><span class="eyebrow green">Service booking</span><h1>{{ $booking->booking_no }}</h1><p>Submitted {{ $booking->created_at->format('d M Y, h:i A') }}</p></div>
    <a class="secondary-button" href="{{ route('customer.bookings.index') }}"><i class="fa-solid fa-arrow-left"></i> Back</a>
</div>

<div class="summary-grid">
    <div><small>Status</small><span class="status-pill">{{ $booking->service_status }}</span></div>
    <div><small>Service date</small><strong>{{ \Carbon\Carbon::parse($booking->service_date)->format('d M Y') }}</strong></div>
    <div><small>Service time</small><strong>{{ $booking->service_time ? \Carbon\Carbon::parse($booking->service_time)->format('h:i A') : 'To be confirmed' }}</strong></div>
</div>

@php
    $trackingSteps = ['Booked', 'Assigned', 'In Progress', 'Completed'];
    $trackingStatus = $booking->service_status;
    $currentStep = array_search($trackingStatus, $trackingSteps, true);
    $currentStep = $currentStep === false ? 0 : $currentStep;
@endphp
<section class="module-card booking-tracker">
    <div class="card-title"><h2>Booking Status Tracking</h2><span>Updated {{ $booking->updated_at->format('d M Y, h:i A') }}</span></div>
    @if($trackingStatus === 'Cancelled')
        <div class="tracking-cancelled"><i class="fa-solid fa-circle-xmark"></i> This booking has been cancelled.</div>
    @else
        <div class="tracking-steps">
            @foreach($trackingSteps as $index => $step)
                <div class="tracking-step {{ $index <= $currentStep ? 'done' : '' }} {{ $index === $currentStep ? 'current' : '' }}">
                    <span><i class="fa-solid {{ $index < $currentStep ? 'fa-check' : ($index === $currentStep ? 'fa-location-dot' : 'fa-circle') }}"></i></span>
                    <strong>{{ $step }}</strong>
                </div>
            @endforeach
        </div>
    @endif
</section>
<style>.booking-tracker{margin-bottom:20px}.tracking-steps{display:grid;grid-template-columns:repeat(4,1fr);position:relative}.tracking-step{position:relative;text-align:center;color:#8a9995}.tracking-step:not(:last-child):after{content:"";position:absolute;top:18px;left:58%;width:84%;height:3px;background:#dfe7e4}.tracking-step.done:not(:last-child):after{background:#39a982}.tracking-step span{position:relative;z-index:2;width:38px;height:38px;margin:0 auto 8px;display:grid;place-items:center;border-radius:50%;background:#edf1ef}.tracking-step.done span{background:#dff5eb;color:#167155}.tracking-step.current span{background:#1f8a70;color:#fff;box-shadow:0 0 0 5px #dff5eb}.tracking-step strong{font-size:12px}.tracking-cancelled{padding:15px;border-radius:10px;background:#fff0ef;color:#b42318}.tracking-cancelled i{margin-right:8px}@media(max-width:620px){.tracking-steps{grid-template-columns:1fr;gap:12px}.tracking-step{display:flex;align-items:center;gap:10px;text-align:left}.tracking-step span{margin:0}.tracking-step:after{display:none}}</style>

@if(session('success'))<div class="alert alert-success">{{ session('success') }}</div>@endif
@if(session('payment_error'))<div class="alert alert-error">{{ session('payment_error') }}</div>@endif
@if($errors->has('payment'))<div class="alert alert-error">{{ $errors->first('payment') }}</div>@endif

@if($booking->service_status === 'Completed' && $booking->invoice)
<section class="module-card" style="margin-bottom:20px">
    <div class="bottom-action" style="margin-top:0">
        <div>
            <strong>Invoice {{ $booking->invoice->invoice_no }}</strong>
            <span>Amount: ₹{{ number_format($booking->invoice->grand_total, 2) }} · Payment: {{ $booking->invoice->payment_status }}</span>
        </div>
        @if($booking->invoice->payment_status !== 'Paid')
            <form method="POST" action="{{ route('customer.payments.create', $booking) }}">@csrf
                <button type="submit" class="primary-link"><i class="fa-solid fa-credit-card"></i> Pay Now</button>
            </form>
        @else
            <span class="status-pill status-approved"><i class="fa-solid fa-circle-check"></i> Paid</span>
        @endif
    </div>
</section>
@endif

<div class="details-grid">
    <section class="module-card">
        <div class="card-title"><h2>Booking information</h2></div>
        <div class="detail-list">
            <div><small>Quotation</small><a href="{{ route('customer.quotations.show', $booking->quotation) }}">{{ $booking->quotation->quotation_number ?? '-' }}</a></div>
            <div><small>Technician status</small><strong>{{ $booking->latestAssignment?->work_status ?? 'Not assigned yet' }}</strong></div>
            <div class="full"><small>Service address</small><strong>{{ $booking->service_address }}</strong></div>
            <div class="full"><small>Remarks</small><strong>{{ $booking->remarks ?: 'No remarks added' }}</strong></div>
        </div>
    </section>
    <section class="module-card">
        <div class="card-title"><h2>Uploaded images</h2><span>{{ $booking->images->count() }}/5</span></div>
        @if($booking->images->isNotEmpty())
            <div class="booking-image-grid">@foreach($booking->images as $image)<a href="{{ asset('storage/'.$image->image_path) }}" target="_blank"><img src="{{ asset('storage/'.$image->image_path) }}" alt="Booking image {{ $loop->iteration }}"></a>@endforeach</div>
        @else
            <p class="muted">No images were added to this booking.</p>
        @endif
    </section>
</div>

<section class="module-card technician-section">
    <div class="card-title"><h2>Assigned Technician</h2>@if($booking->latestAssignment)<span class="status-pill">{{ $booking->latestAssignment->work_status }}</span>@endif</div>
    @if($booking->latestAssignment?->technician)
        @php($technician = $booking->latestAssignment->technician)
        <div class="technician-card">
            <div class="technician-avatar"><i class="fa-solid fa-user-shield"></i></div>
            <div class="technician-primary"><small>Technician</small><strong>{{ $technician->technician_name }}</strong><span>Assigned for your pest-control service</span></div>
            <div class="technician-detail"><i class="fa-solid fa-phone"></i><span><small>Mobile</small><a href="tel:{{ $technician->mobile }}">{{ $technician->mobile }}</a></span></div>
            <div class="technician-detail"><i class="fa-regular fa-envelope"></i><span><small>Email</small>@if($technician->email)<a href="mailto:{{ $technician->email }}">{{ $technician->email }}</a>@else<strong>Not provided</strong>@endif</span></div>
            <div class="technician-detail"><i class="fa-regular fa-calendar"></i><span><small>Assigned date</small><strong>{{ $booking->latestAssignment->assigned_date ? \Carbon\Carbon::parse($booking->latestAssignment->assigned_date)->format('d M Y') : '-' }}</strong></span></div>
            <div class="technician-detail"><i class="fa-regular fa-clock"></i><span><small>Assigned time</small><strong>{{ $booking->latestAssignment->assigned_time ? \Carbon\Carbon::parse($booking->latestAssignment->assigned_time)->format('h:i A') : 'To be confirmed' }}</strong></span></div>
        </div>
    @else
        <div class="technician-empty"><i class="fa-solid fa-user-clock"></i><div><strong>Technician not assigned yet</strong><p>Technician contact and schedule details will appear here after assignment.</p></div></div>
    @endif
</section>
@endsection