@extends('layouts.frontend.master_old')

@section('content')

    <section class="form-section py-5"
             style="background: linear-gradient(135deg, #f5f7fa, #c3cfe2); min-height: 100vh;">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-8">
                    <div class="card shadow-lg border-0 rounded-4 p-4" style="background-color: #ffffff;">
                        <h2 class="mb-4 text-center text-dark fw-bold">Saloon Management</h2>
                        <form id="saloonForm" method="POST" action="{{route('enlist.store')}}">
                            @csrf
                            <div class="mb-3">
                                <label for="name" class="form-label fw-semibold">Name</label>
                                <input type="text" class="form-control rounded-pill shadow-sm" id="name" name="name"
                                       placeholder="Enter name">
                            </div>

                            <div class="mb-3">
                                <label for="website" class="form-label fw-semibold">Website</label>
                                <input type="url" class="form-control rounded-pill shadow-sm" id="website"
                                       name="website" placeholder="Enter website">
                            </div>

                            <div class="mb-3">
                                <label for="ownerName" class="form-label fw-semibold">Owner Name</label>
                                <input type="text" class="form-control rounded-pill shadow-sm" id="ownerName"
                                       name="owner_name" placeholder="Enter owner name">
                            </div>

                            <div class="mb-3">
                                <label for="phone" class="form-label fw-semibold">Phone</label>
                                <input type="tel" class="form-control rounded-pill shadow-sm" id="phone" name="phone"
                                       placeholder="Enter phone number">
                            </div>

                            <div class="mb-3">
                                <label for="email" class="form-label fw-semibold">Email</label>
                                <input type="email" class="form-control rounded-pill shadow-sm" id="email" name="email"
                                       placeholder="Enter email">
                            </div>

                            <div class="mb-3">
                                <label class="form-label fw-semibold">Address Input Method</label>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="address_option"
                                           id="geocodeOption" value="geocode" checked>
                                    <label class="form-check-label" for="geocodeOption">Geocode</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="address_option"
                                           id="textAddressOption" value="text">
                                    <label class="form-check-label" for="textAddressOption">Address in Text</label>
                                </div>
                            </div>

                            <div class="mb-3" id="geocodeFields">
                                <label for="latitude" class="form-label fw-semibold">Latitude</label>
                                <input type="text" class="form-control rounded-pill shadow-sm mb-2" id="latitude"
                                       name="latitude" placeholder="Enter latitude">

                                <label for="longitude" class="form-label fw-semibold">Longitude</label>
                                <input type="text" class="form-control rounded-pill shadow-sm" id="longitude"
                                       name="longitude" placeholder="Enter longitude">
                            </div>

                            <div class="mb-3 d-none" id="textAddressField">
                                <label for="address" class="form-label fw-semibold">Address</label>
                                <input type="text" class="form-control rounded-pill shadow-sm" id="address"
                                       name="address" placeholder="Enter address">
                            </div>

                            <button type="submit" class="btn btn-dark w-100 rounded-pill shadow-sm fw-bold py-2">
                                Submit
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script>
        $(document).ready(function () {
            $('input[name="address_option"]').on('change', function () {
                $('#geocodeFields').toggleClass('d-none', this.value !== 'geocode');
                $('#textAddressField').toggleClass('d-none', this.value !== 'text');
            });

            $('#saloonForm').on('submit', function (e) {
                e.preventDefault();
                var formData = $(this).serialize();
                const url = $(this).attr('action');

                $.ajax({
                    url: url,
                    type: 'POST',
                    data: formData, // Correct for URL-encoded data
                    success: function (response) {
                        alert(response.message);
                        $('#saloonForm')[0].reset();
                    },
                    error: function (xhr) {
                        var errors = xhr.responseJSON.errors;
                        var errorMessage = '';
                        for (var key in errors) {
                            if (errors.hasOwnProperty(key)) {
                                errorMessage += errors[key].join(', ') + '\n';
                            }
                        }
                        alert(errorMessage);
                    }
                });
            });
        });

    </script>

@endsection