@extends('frontend.layouts.blank')

@section('title')
    Checkout
@endsection

@section('content')
    <style>
        .checkout {
            padding: 60px 55px;
            background-color: #19252e;
            border-radius: 6px;
        }

        .checkout h3 {
            color: #ffffff;
            font-weight: 700;
            font-size: 24px;
            text-transform: uppercase;
            margin-bottom: 18px;
        }

        .ht-request-call-one-form {
            max-width: 100%;
        }

        .ht-request-call-one-form input,
        .ht-request-call-one-form select {
            width: 100%;
            background-color: #29353e;
            height: 44px;
            border: none;
            color: #dddddd;
            font-family: "Poppins", sans-serif;
            font-weight: 300;
            margin-bottom: 10px;
            line-height: 24px;
            padding: 10px 20px;
        }
    </style>
    <div class="container border rounded my-5 w-50 h-100 checkout">
        <div class="input-group mb-3">
            <h3>Checkout</h3>
            <!-- Request Call One Form Start -->
            <div class="ht-request-call-one-form">
                <form action="#">
                    <input type="text" name="name" placeholder="Nama*">
                    <input type="email" name="email" placeholder="Email*">
                    <input type="text" name="phone_number" placeholder="Nomor HP*">
                    <select name="consultation">
                        <option value="">-- Pilih Konsultasi --</option>
                        @foreach ($services as $item)
                            <option value="{{ $item->id }}">{{ $item->name }}</option>
                        @endforeach
                    </select>
                    <select name="duration">
                        <option value="">-- Pilih Durasi --</option>
                        @foreach ($durations as $item)
                            <option value="{{ $item->time }}">{{ $item->name }}</option>
                        @endforeach
                    </select>
                    <input type="date" name="date" placeholder="Hari*">
                    <select name="session">
                        <option value="">-- Pilih Sesi --</option>
                    </select>
                    <div id="emailHelp" class="form-text text-white">
                        <b>Jam Operasional</b>
                        <p class="tooltiptext">
                            Setiap Hari : 08:00 - 23:00
                        </p>
                    </div>
                    <table class="table text-white my-5 text-end">
                        <tr>
                            <td><b>Sesi</b></td>
                            <td><b>:</b></td>
                            <td><b>2</b></td>
                        </tr>
                        <tr>
                            <td><b>Harga</b></td>
                            <td><b>:</b></td>
                            <td><b>Rp. 100.000,-/Sesi</b></td>
                        </tr>
                        <tr>
                            <td><b>Total Harga</b></td>
                            <td><b>:</b></td>
                            <td><b>Rp. 200.000,-</b></td>
                        </tr>
                        <tr>
                            <td><b>Diskon</b></td>
                            <td><b>:</b></td>
                            <td><b>Rp. 0,-</b></td>
                        </tr>
                        <tr>
                            <td><b>Biaya Layanan</b></td>
                            <td><b>:</b></td>
                            <td><b>Rp. 10.000,-</b></td>
                        </tr>
                        <tr>
                            <td><b>Total Biaya</b></td>
                            <td><b>:</b></td>
                            <td><b>Rp. 10.000,-</b></td>
                        </tr>
                    </table>
                    <input type="submit" value="checkout">
                </form>
            </div><!-- Request Call One Form End -->
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            $('[name="duration"], [name="date"], [name="session"]').prop('disabled', true);

            $('[name="consultation"]').on('change', function() {
                if ($(this).val()) {
                    $('[name="duration"]').prop('disabled', false);
                } else {
                    $('[name="duration"], [name="date"], [name="session"]').prop('disabled', true);
                    $('[name="duration"], [name="date"], [name="session"]').val("");
                }
            });

            $('[name="duration"]').on('change', function() {
                if ($(this).val()) {
                    $('[name="date"]').prop('disabled', false);
                    $('[name="date"], [name="session"]').val("");
                    $('[name="session"]').prop('disabled', true);
                } else {
                    $('[name="date"], [name="session"]').prop('disabled', true);
                    $('[name="date"], [name="session"]').val("");
                }
            });

            $('[name="date"]').on('change', function() {
                if ($(this).val()) {
                    $('[name="session"]').val("");
                    $('[name="session"]').prop('disabled', false);
                    getDataSession();
                } else {
                    $('[name="session"]').prop('disabled', true);
                    $('[name="session"]').val("");
                }
            });

            function getDataSession() {
                $.ajax({
                    url: '{{ route('service.landing.sessions') }}',
                    type: 'POST',
                    data: {
                        'duration': $('[name="duration"]').val(),
                    },
                    beforeSend: function(xhr) {
                        xhr.setRequestHeader('X-CSRF-TOKEN', '{{ csrf_token() }}');
                    },
                    success: function(response) {
                        $.each(response.data, function(key, item) {
                            $('[name="session"]').append($('<option>', {
                                value: item.index,
                                text: item.value
                            }));
                        });
                    },
                    error: function(xhr, status, error) {
                        $('[name="destination"]').prop('disabled', false);
                        console.error(xhr.responseText);
                    }
                });
            }
        });
    </script>
@endpush