@extends('components.service_description_layout')
@section('service_description')
    <div class="container">
        <div class="card">
            <div class="card-body">
                <h3 class="card-title">{{ $service->name }}</h3>
                <p class="card-text">{{ $service->description ?? 'No description available.' }}</p>
                <hr>
                <div class="form-check">
                    <input type="checkbox" class="form-check-input" id="agree-checkbox">
                    <label class="form-check-label" for="agree-checkbox">
                        I have read and agree to the terms and conditions of this service.
                    </label>
                </div>
                <br>
                <button id="proceed-btn" class="btn btn-success" disabled>Proceed</button>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script>
        $(document).ready(function () {
            $('#agree-checkbox').on('change', function () {
                $('#proceed-btn').prop('disabled', !this.checked);
            });

            $('#proceed-btn').on('click', function () {
                let serviceId = "{{ $service->id }}";
                let officeId = "{{ $service->office_id }}";
                let formRoute = '{{ $service->form_route }}';

                if (formRoute) {
                    window.location.href = "{{ url('/') }}/" + formRoute + "?service_id=" + serviceId + "&office_id=" + officeId;
                } else {
                    alert('No form has been created for this service.');
                }
            });
        });
    </script>
@endsection