@extends('layouts.app')

@section('title', 'Buat Reservasi')

@section('content')
<div class="container mt-4">
    <div class="row justify-content-center">
        <div class="col-md-8">

            <h3 class="mb-4 text-center">Reservasi Capster</h3>

            <div class="card shadow-sm">
                <div class="card-body">
                    <form id="reservation-form">
                        @csrf

                        <!-- Nama -->
                        <div class="form-group">
                            <label>Nama</label>
                            <input type="text" name="name" class="form-control" value="{{ auth()->user()->name }}" readonly id="name">
                        </div>

                        <!-- Email -->
                        <div class="form-group">
                            <label>Email</label>
                            <input type="email" name="email" class="form-control" value="{{ auth()->user()->email }}" readonly id="email">
                        </div>

                        <!-- No HP -->
                        <div class="form-group">
                            <label>No. HP</label>
                            <input type="text" name="phone_number" class="form-control" id="phone_number" placeholder="Contoh: 08123456789">
                            <div class="invalid-feedback" id="error-phone_number"></div>
                        </div>

                        <!-- Tanggal Kedatangan -->
                        <div class="form-group">
                            <label>Tanggal Kedatangan</label>
                            <input type="text" name="reservation_date" class="form-control" id="reservation_date" autocomplete="off">
                            <div class="invalid-feedback" id="error-reservation_date"></div>
                        </div>

                        <!-- Jam Kedatangan -->
                        <div class="form-group">
                            <label>Jam Kedatangan</label>
                            <input type="time" name="reservation_time" class="form-control" id="reservation_time">
                            <div class="invalid-feedback" id="error-reservation_time"></div>
                        </div>

                        <!-- Cabang -->
                        <div class="form-group">
                            <label>Cabang</label>
                            <select name="branch_id" class="form-control" id="branch_id">
                                <option value="">-- Pilih Cabang --</option>
                                @foreach($branches as $branch)
                                    <option value="{{ $branch->id }}" data-name="{{ $branch->name }}">{{ $branch->name }}</option>
                                @endforeach
                            </select>
                            <div class="invalid-feedback" id="error-branch_id"></div>
                        </div>

                        <!-- Tombol Submit -->
                        <div class="form-group text-center mt-4">
                            <button type="submit" class="btn btn-primary btn-lg" id="submit-btn">
                                Reservasi
                            </button>
                        </div>
                    </form>

                    <!-- Tempat QR Code -->
                    <div class="text-center mt-4" id="qrcode-container" style="display:none;">
                        <h5 class="mb-3 text-success font-weight-bold">
                            ✅ Simpan QR Code ini sebagai bukti yang akan ditunjukkan ke kasir
                        </h5>
                        <div id="qrcode" style="
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            margin: 0 auto;
                        "></div>
                    </div>

                </div>
            </div>

        </div>
    </div>
</div>
@endsection

@push('styles')
<!-- Bootstrap Datepicker CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
@endpush

@push('scripts')
<!-- jQuery Full version -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- SweetAlert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<!-- QRCode.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<!-- Bootstrap Datepicker JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

<script>
$(document).ready(function() {
    // Init datepicker
    $('#reservation_date').datepicker({
        format: 'yyyy-mm-dd',
        autoclose: true,
        todayHighlight: true
    });

    // Submit form pakai SweetAlert confirm + AJAX
    $('#reservation-form').on('submit', function(e) {
        e.preventDefault();

        // SweetAlert confirm dulu
        Swal.fire({
            title: 'Konfirmasi',
            text: 'Apakah Anda yakin ingin reservasi di tanggal dan jam tsb?',
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Ya, Simpan',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                // Mulai AJAX kirim data
                $('#submit-btn').prop('disabled', true).text('Menyimpan...');

                // Clear previous errors
                $('.form-control').removeClass('is-invalid');
                $('.invalid-feedback').text('');

                $.ajax({
                    url: '{{ route("barbershop.reservations.store") }}',
                    method: 'POST',
                    data: {
                        _token: $('input[name="_token"]').val(),
                        name: $('#name').val(),
                        email: $('#email').val(),
                        phone_number: $('#phone_number').val(),
                        reservation_date: $('#reservation_date').val(),
                        reservation_time: $('#reservation_time').val(),
                        branch_id: $('#branch_id').val(),
                    },
                    success: function(response) {
                        $('#submit-btn').prop('disabled', false).text('Reservasi');

                        Swal.fire({
                            title: 'Reservasi Berhasil!',
                            text: 'QR Code telah digenerate.\nNo. Antrian Anda: ' + response.queue_number,
                            icon: 'success',
                            confirmButtonText: 'Lihat QR Code'
                        }).then((result) => {
                            if (result.isConfirmed) {
                                const branchName = $('#branch_id option:selected').data('name');
                                $('#qrcode-container').show();
                                $('#qrcode').empty();
                                new QRCode(document.getElementById("qrcode"), {
                                    text:
                                        'Nama: ' + $('#name').val() + '\n' +
                                        'Email: ' + $('#email').val() + '\n' +
                                        'No. HP: ' + $('#phone_number').val() + '\n' +
                                        'Tanggal: ' + $('#reservation_date').val() + '\n' +
                                        'Jam: ' + $('#reservation_time').val() + '\n' +
                                        'Cabang: ' + branchName + '\n' +
                                        'No. Antrian: ' + response.queue_number,
                                    width: 200,
                                    height: 200
                                });
                            }
                        });

                        // Optionally reset form → bisa diaktifkan kalau mau auto reset
                        // $('#reservation-form')[0].reset();
                    },
                    error: function(xhr) {
                        $('#submit-btn').prop('disabled', false).text('Simpan Reservasi');

                        if (xhr.status === 422) {
                            // Validasi error
                            let errors = xhr.responseJSON.errors;

                            if (errors.phone_number) {
                                $('#phone_number').addClass('is-invalid');
                                $('#error-phone_number').text(errors.phone_number[0]);
                            }

                            if (errors.reservation_date) {
                                $('#reservation_date').addClass('is-invalid');
                                $('#error-reservation_date').text(errors.reservation_date[0]);
                            }

                            if (errors.reservation_time) {
                                $('#reservation_time').addClass('is-invalid');
                                $('#error-reservation_time').text(errors.reservation_time[0]);
                            }

                            if (errors.branch_id) {
                                $('#branch_id').addClass('is-invalid');
                                $('#error-branch_id').text(errors.branch_id[0]);
                            }
                        } else {
                            Swal.fire('Error', 'Gagal menyimpan reservasi. Silakan coba lagi.', 'error');
                        }
                    }
                });
            }
        });
    });
});
</script>
@endpush