@extends('layouts.admin.app')

@section('title', 'Admin | Manage Booking')

@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('admin.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>
                                            <i class="fas fa-cut ml-1"></i>
                                        </h4>
                                        <h4 class="font-weight-normal">Barber :
                                            <span class="fw-bold ">{{ $booking->barber->full_name }}</span>

                                        </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>{{ $payment->data->attributes->reference_number }}</span>
                                            </h4>
                                            <h4 class="mt-2 font-weight-light">Paid Via : <span class="badge badge-primary p-2">{{ ucwords($payment->data->attributes->payment_method_used) }}</span>
                                            </h4>
                                        @endif
                                        <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>

                                {{-- Check for Approval --}}
                                {{-- @if ($booking->status == 0) --}}
                                <div class="nav-wrapper">
                                    <ul class="nav nav-pills nav-fill flex-column flex-md-row" id="tabs-icons-text"
                                        role="tablist">

                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tabs-icons-text-1-tab"
                                                data-toggle="tab" href="#tabs-icons-text-1" role="tab"
                                                aria-controls="tabs-icons-text-1" aria-selected="true"><i
                                                    class="fas fa-cog mr-2"></i>Manage Booking</a>
                                        </li>

                                        @if ($booking->status !== 2)
                                            <!-- <li class="nav-item">
                                                <a class="nav-link mb-sm-3 mb-md-0" id="tabs-icons-text-2-tab"
                                                    data-toggle="tab" href="#tabs-icons-text-2" role="tab"
                                                    aria-controls="tabs-icons-text-2" aria-selected="false"><i
                                                        class="far fa-calendar mr-2"></i>Move Schedule</a>
                                            </li> -->
                                        @endif
                                    </ul>
                                </div>
                                <div class="card shadow">
                                    <div class="card-body">
                                        <div class="tab-content" id="myTabContent">

                                            <div class="tab-pane fade show active" id="tabs-icons-text-1" role="tabpanel"
                                                aria-labelledby="tabs-icons-text-1-tab">
                                                <form action="{{ route('admin.bookings.update', $booking) }}"
                                                    method="post" id="booking_form">
                                                    @csrf @method('PUT')
                                                    @include('layouts.includes.alert') <br>


                                                    <div class="form-group mb-3">
                                                        <label class="form-label">Select Status *</label>
                                                        <select class="form-control" name="status" required>
                                                            <option value=""></option>
                                                            <option value="1"
                                                                @if ($booking->status == 1) selected @endif>Approve
                                                                Request</option>
                                                            <option value="2"
                                                                @if ($booking->status == 2) selected @endif>Cancel
                                                                Request</option>
                                                        </select>
                                                    </div>

                                                    <div class="form-group mb-3">
                                                        <textarea class="form-control" name="remark" rows="5" placeholder="Add Remark (Optional)">{{ $booking->remark }}</textarea>
                                                    </div>

                                                    <button class="btn btn-primary float-end" type="button"
                                                        onclick="event.preventDefault();confirm('Do you want to Update Booking?', '', 'Yes').then(res => res.isConfirmed ? $('#booking_form').submit() : false )">
                                                        Save
                                                    </button>
                                                </form>
                                            </div>
                                            <div class="tab-pane fade" id="tabs-icons-text-2" role="tabpanel"
                                                aria-labelledby="tabs-icons-text-2-tab">
                                                <form action="{{ route('admin.bookings.update', $booking->id) }}"
                                                    method="post" id="move_schedule">
                                                    @csrf @method('PUT')
                                                    @include('layouts.includes.alert') <br>

                                                    <div class="form-group mb-3">
                                                        <select class="form-control" name="schedule_id" required>
                                                            <option value=""> ----Select Schedule ----</option>
                                                            @foreach ($schedules as $schedule)
                                                                <option value="{{ $schedule->id }}">
                                                                    {{ formatDate($schedule->date_time_start) }} at
                                                                    {{ formatDate($schedule->date_time_start, 'time') }}
                                                                    -
                                                                    {{ formatDate($schedule->date_time_end, 'time') }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>

                                                    <div class="form-group mb-3">
                                                        <textarea class="form-control" name="remark" rows="5" placeholder="Add Remark (Optional)">{{ $booking->remark }}</textarea>
                                                    </div>

                                                    <input type="hidden" name="old_schedule"
                                                        value="{{ $booking->schedule_id }}">
                                                    <button class="btn btn-primary float-end" type="button"
                                                        onclick="event.preventDefault();confirm('Do you want to Move Schedule?', '', 'Yes').then(res => res.isConfirmed ? $('#move_schedule').submit() : false )">
                                                        Save
                                                    </button>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {{-- @endif --}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>


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

@endsection

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