@extends('layouts.customer.app')

@section('title', 'Peds | Booking History')

@section('styles')
    <style>
        td {
            white-space: normal !important;
            text-align: justify;
        }
    </style>
@endsection

@section('content')

    {{-- CONTAINER --}}
    <div class="container-fluid py-4">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('customer.bookings.index') }}">All
                        Bookings</a>
                </li>
                <li class="breadcrumb-item active" aria-current="page">
                    Date Schedule : <span class="fw-bold ">{{ formatDate($booking->schedule->date_time_start) }} at
                        {{ formatDate($booking->schedule->date_time_start, 'time') }}
                        - {{ formatDate($booking->schedule->date_time_end, 'time') }}</span>
                </li>
            </ol>
        </nav>

        @include('layouts.includes.alert')
        <div class="row justify-content-center">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body pt-3">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="row text-md-start py-3">
                                    <div class="col-md-8 font-weight-normal">
                                        <img class="img-fluid rounded-circle mx-1"
                                            src="{{ handleNullAvatar($booking->user->avatar_profile) }}" width="75"
                                            alt="avatar"> <br><br>
                                        <h4 class="font-weight-normal">Customer :
                                            <span class="fw-bold ">{{ $booking->user->customer->full_name }}</span>
                                        </h4>
                                        <h4 class="font-weight-normal">Service :
                                            <span class="fw-bold ">{{ $booking->service->name }}</span>
                                        </h4>
                                        <h4 class="font-weight-normal">Barber :
                                            <span class="fw-bold ">{{ $booking->barber->full_name }}</span>
                                            <i class="fas fa-customer-md ml-1"></i>
                                        </h4>
                                        <h4 class="font-weight-normal">Date Schedule : <span
                                                class="fw-bold ">{{ formatDate($booking->schedule->date_time_start) }}
                                                <i class="far fa-calendar ms-1"></i></span>
                                            at <span
                                                class="fw-bold ">{{ formatDate($booking->schedule->date_time_start, 'time') }}
                                                - {{ formatDate($booking->schedule->date_time_end, 'time') }}
                                                <i class="far fa-clock ms-1"></i>
                                        </h4>
                                        <h4 class="font-weight-normal">Customer's Note :
                                            <span class="fw-bold ">{{ $booking->note ?? 'N/A' }}</span>
                                        </h4>
                                        {{-- Status --}}
                                        <h4 class=" font-weight-normal">Status - {!! handleBookingStatus($booking->status) !!}</h4>
                                        @if ($booking->remark)
                                            <h4 class="font-weight-normal">
                                                Remark: {{ $booking->remark }}
                                            </h4>
                                        @endif
                                        @if ($booking->is_online)
                                            <h4 class="mt-2 font-weight-light">Control No :
                                                <span>{{ $booking->reference_no }}</span>
                                            </h4>
                                            <h4 class="mt-2 font-weight-light">Paid Via : <span
                                                    class="badge badge-primary p-2">{{ $booking->payment_method->type }}</span>
                                            </h4>
                                        @endif


                                        <h4 class="font-weight-normal">Created At: {{ formatDate($booking->created_at) }}
                                        </h4>
                                        <br>

                                    </div>
                                    {{-- Only show if booking is thru online --}}
                                    @if ($booking->is_online)
                                        <div class="col-md-4">
                                            <figure class="d-md-block d-none">
                                                <a class="glightbox" href="{{ $booking->payment_receipt }}">
                                                    <img class="img-fluid"
                                                        src="{{ handleNullImage($booking->payment_receipt) }}"
                                                        width="150" alt="payment_receipt">
                                                </a>
                                            </figure>
                                            <div class="d-block d-md-none">

                                                <a class="h5" href="{{ handleNullImage($booking->payment_receipt) }}"
                                                    download>Download Payment Receipt <i class="fas fa-link ml-1"></i></a>
                                            </div>
                                            <hr class="d-block d-md-none">
                                        </div>
                                    @endif


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

        </div>
    </div>
    {{-- End CONTAINER --}}

@endsection

@section('script')
    <script>
        const lightbox = GLightbox({
            selector: '.glightbox'
        });
    </script>
@endsection