@extends('layouts.app')

@section('content')

<main class="content">
    <div class="container">
        <div class="row mt-5">
            <div class="col-md-8">
                <h2>Ajouter un Service</h2>
            </div>
        </div>
        <div class="row mt-3">
            <div class="col-md-8">
                <form action="{{ route('services.store') }}" method="POST" id="serviceForm">
                    @csrf
                    <div class="form-group">
                        <label for="type_service">Type de service</label><br>
                        <input type="radio" name="type_service" value="normal" checked> Service Normal
                        <input type="radio" name="type_service" value="grand"> Grand Service
                    </div>
                    <div id="normalServiceForm">
                        <!-- Formulaire pour un service normal -->
                        <div class="form-group">
                            <label for="nom_service"> Service</label>
                            <input type="text" class="form-control" id="nom_service" name="nom_service">
                        </div>
                        <div class="form-group">
                            <label for="prix_service">Prix</label>
                            <input type="text" class="form-control" id="prix_service" name="prix_service">
                        </div>
                    </div>
                    <div id="grandServiceForm" style="display: none;">
                        <!-- Formulaire pour un grand service -->
                        <div class="form-group">
                            <label for="nom_grandservice">Grand Service</label>
                            <input type="text" class="form-control" id="nom_grandservice" name="nom_grandservice">
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary">Enregistrer</button>
                </form>
            </div>
        </div>
    </div>
</main>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        // Écouteur d'événement pour les changements de choix de service
        document.querySelectorAll('input[name="type_service"]').forEach(function(input) {
            input.addEventListener('change', function() {
                if (this.value === 'grand') {
                    document.getElementById('normalServiceForm').style.display = 'none';
                    document.getElementById('grandServiceForm').style.display = 'block';
                } else {
                    document.getElementById('normalServiceForm').style.display = 'block';
                    document.getElementById('grandServiceForm').style.display = 'none';
                }
            });
        });
    });
</script>

@endsection