@extends('layouts.customer.app')

@section('title', "Perd's Barbershop | Booking")

@section('styles')
    <script src="https://www.google.com/recaptcha/enterprise.js" async defer></script>
@endsection

@section('content')

    {{-- CONTAINER --}}
    <div class="container-fluid pl-4 pl-md-0 py-3">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('customer.services.index', $service) }}">All
                        Services</a>
                </li>
                <li class="breadcrumb-item active" aria-current="page">{{ $service->name }}</li>
            </ol>
        </nav>

        {{-- payment_method --}}
        <div class="modal fade" id="m_payment_method" tabindex="-1" role="dialog" aria-labelledby="m_payment_method_label"
            aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
            <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header bg-primary">
                        <h6 class="modal-title text-white"><i class="fas fa-info-circle me-1"></i> Accepting Payments </h6>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body py-5">
                        <table class="table table-sm table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th>Type</th>
                                    <th>Account Name</th>
                                    <th>Account No.</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($payment_methods as $pm)
                                    <tr>
                                        <td>{{ $pm->type }}</td>
                                        <td>{{ $pm->account_name }}</td>
                                        <td>{{ $pm->account_no }}</td>
                                        <td>{!! isPaymentMethodOnline($pm->is_online) !!}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>

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

        <div class="row justify-content-center">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body pt-3">
                        <div class="row">
                            {{-- available --}}
                            <div class="col-md-7">
                                <img class="img-fluid d-none d-lg-block mx-md-auto"
                                    src="{{ asset('img/booking/barber.svg') }}" alt="book_schedule">

                            </div>
                            <div class="col-md-4">
                                <h2 class="text-primary fw-bold">Perd's Barber Shop <i class="fas fa-cut ml-1"></i>
                                </h2>

                                <a href="javascript:void(0)" onclick="$('#m_payment_method').modal('show')">
                                    <small>View Payment Options
                                        <i class="fas fa-info-circle ms-1"></i>
                                    </small>
                                </a>
                                <br>
                                <br>
                                <form action="{{ route('customer.services.bookings.store', $service) }}" method="post"
                                    enctype="multipart/form-data" id="booking_form">
                                    @csrf

                                    @include('layouts.includes.alert')

                                    <div class="form-group mb-3 ">
                                        <label class="form-label">Name</label>
                                        <input class="form-control" type="text"
                                            value="{{ auth()->user()->customer->full_name }}" readonly>
                                    </div>

                                    <div class="form-group mb-3 ">
                                        <label class="form-label">Service

                                            <i class="fas fa-info-circle fa-xs" data-toggle="tooltip" data-placement="right"
                                                title="{{ $service->name }} - {{ $service->description }}"></i>
                                        </label>
                                        <input class="form-control" type="text" value="{{ $service->name }}" readonly>
                                    </div>

                                    <div class="form-group mb-3">
                                        <label class="form-label">Select Barber *
                                            <i class="fas fa-info-circle fa-xs" data-toggle="tooltip" data-placement="right"
                                                title=" You may select your preferred barber for your haircut service. Please note that if your chosen barber is unavailable, the administrator reserves the right to assign a dedicated barber to proceed with your service."></i>
                                        </label>
                                        <select class="form-control" name="barber_id">
                                            <option value=""></option>
                                            @foreach ($barbers as $barber)
                                                <option value="{{ $barber->id }}"
                                                    @if (old('barber_id') == $barber->id) selected @endif>
                                                    {{ $barber->full_name }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="form-group mb-3">
                                        <label class="form-label">Select Date Schedule *
                                            <i class="fas fa-info-circle fa-xs" data-toggle="tooltip" data-placement="right"
                                                title=" Please select the appropriate date and time for your haircut appointment. This is a fixed date schedule to help minimize any inconvenience."></i>

                                        </label>
                                        <select class="form-control" name="schedule_id">
                                            <option value=""></option>
                                            @foreach ($schedules as $schedule)
                                                <option value="{{ $schedule->id }}"
                                                    @if (old('schedule_id') == $schedule->id) selected @endif>
                                                    {{ 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 ">
                                        <label class="form-label">Reservation
                                            Fee
                                            <i class="fas fa-info-circle fa-xs" data-toggle="tooltip" data-placement="right"
                                                title="To minimize inconvenience, we require a ₱100 reservation fee. This fee will be deducted from your total bill when you utilize the barbershop's services."></i>
                                        </label>
                                        <input class="form-control" type="text" name="service_id" value="100"
                                            readonly>
                                    </div>

                                    <!-- <div class="form-group mb-3">
                                        <label class="form-label">Select Payment Method *
                                            <i class="fas fa-info-circle fa-xs" data-toggle="tooltip" data-placement="right"
                                                title="Select the payment method you used for your down payment. If you haven't decided yet, click 'View Payment Options' at the top to check the available methods from Per's Barbershop."></i>

                                        </label>
                                        <select class="form-control" name="payment_method_id">
                                            <option value=""></option>
                                            @foreach ($payment_methods as $payment_method)
                                                <option value="{{ $payment_method->id }}"
                                                    @if (old('payment_method_id') == $payment_method->id) selected @endif>
                                                    {{ $payment_method->type }}</option>
                                            @endforeach
                                        </select>
                                    </div> -->

                                    <!-- <div class="form-group mb-3">
                                        <label class="form-label">Reference No. *</label>
                                        <input class="form-control" type="text" name="reference_no"
                                            placeholder="Enter the reference / control no."
                                            value="{{ old('reference_no') }}" required>
                                    </div> -->


                                    <div class="form-group mb-3">
                                        <label class="form-label">Add Note (Optional)</label>
                                        <input class="form-control" type="text" value="{{ old('note') }}"
                                            name="note">
                                    </div>

                                    <!-- <div class="form-group mb-3">
                                        <input class="payment_receipt" type="file" name="image">
                                    </div> -->

                                    <div class="form-text">Note* To process your request, we require you to submit
                                        your a screenshot of your down payment transaction. For more info please visit our
                                        <span class="text-underline">FAQS</span> page.
                                    </div>
                                    <br>

                                    <div class="g-recaptcha" data-sitekey="6LcIZPclAAAAAPFFV8DDOhJiAyma_73wiFe0uPuc"
                                        data-action="LOGIN"></div>
                                    <br />

                                    <input type="hidden" name="service_id" value="{{ $service->id }}">

                                </form>

                                <div class="mt-3">
                                    <button class="btn btn-primary float-end" type="button"
                                        onclick="event.preventDefault();confirm('Do you want to book this schedule?','Double check your provided credentials before proceeding 💭.', 'Yes').then(res => res.isConfirmed ? $('#booking_form').submit() : false)">
                                        Book Now
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- End CONTAINER --}}
@endsection

@section('script')
    <script>
        initiateFilePond('.payment_receipt', ["image/png", "image/jpeg", "image/jpg", "image/webp"],
            'Drag & Drop or <b>Browse Payment Screenshot</b>')
    </script>
@endsection