@extends('components.customer_layout')

@section('customer-content')
    <div class="container mt-5">
        <div class="card">
            <div class="card-header">
                <h4>Apply for Service</h4>
            </div>
            <div class="card-body">
                <h5 class="card-title">{{ $service->name }}</h5>
                <p class="card-text"><strong>Description:</strong> {{ $service->description }}</p>
                <p class="card-text"><strong>Payment:</strong> {{ $service->payment }}</p>
                <form action="#" method="POST">
                    @csrf
                    <button type="submit" class="btn btn-success">Submit Application</button>
                </form>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            let selectedServiceId = sessionStorage.getItem('selectedServiceId');
            if (selectedServiceId && selectedServiceId != "{{ $service->id }}") {
                window.location.href = `/apply/${selectedServiceId}`;
            }
        });
    </script>
@endsection