@extends('layouts.app')
@section('title', 'blog')
@section('idname', 'single')
@section('content')

<div class="container" style="margin-top: 100px; margin-bottom: 100px;">
    <div class="row">
        <div class="col-md-8" style="margin-top: 100px;">
            @if(session('error'))
            <div class="alert alert-danger" role="alert">
                {{ session('error') }}
            </div>
            @endif

            @if(isset($slug) && $slug == 'message')
        <div class="alert alert-info" role="alert">
            Pay the 5€ annual fee
            to access the distribution page and get more services for free
        </div>
    @elseif(session('success'))
        <div class="alert alert-success" role="alert">
            {{ session('success') }}
        </div>
    @endif

            <div class="mb-4">
                <h3 style="color: black;">Click to select the service</h3>
            </div>

            <form id="purchaseForm" action="{{ route('purchase') }}" method="post">
                @csrf
                <div class="mb-3">
                    
                    <select class="form-control" name="service" id="service" onchange="updateDescription()">
                        <option >Click to select the service</option>
                        @foreach($services as $service)
                        <option value="{{ $service->id }}">{{ $service->name }} - €{{ $service->price }}</option>
                        @endforeach
                    </select>
                </div>

                <!-- Additional form fields as needed -->

                <button type="button" class="btn btn-red register" onclick="confirmPurchase()">Pay with Wallet</button>
            </form>

            <div class="mt-4">
                <h4 style="color: black;">All Services</h4>
            </div>


            <div class="mb-4">
                <ul>
                     @foreach($services as $key => $service)
                    <li>{{ $key + 1 }}. {{ $service->name }} - €{{ $service->price }}</li>
                    @endforeach
                </ul>
            </div>
        </div>

        <!-- Right Column -->
        <div class="col-md-4">
            <div id="serviceDetails">
                <!-- Display image and description dynamically using JavaScript -->
            </div>
        </div>
    </div>
</div>

<script>
$(document).ready(function() {
    // Split the URL by hyphens ("-")
    const urlParts = window.location.pathname.split("-");

    // Extract the last part (which contains the number)
    const lastPart = urlParts[urlParts.length - 1];

    // Check if the last part is a number
    const numberAfterLastHyphen = parseInt(lastPart);
    if (!isNaN(numberAfterLastHyphen)) {
        console.log(numberAfterLastHyphen);

        // Select the corresponding option in the dropdown menu
        $('#service').val(numberAfterLastHyphen);

        // Trigger the change event to update the description
        $('#service').change();
    } else {
        console.log("No valid number found in the URL.");
    }
});


function updateDescription() {
    var selectedServiceId = $('#service').val();

    // Get the service name from the selected option
    var serviceName = $('#service option:selected').text();

    // Replace spaces and special characters in the service name to create a URL-friendly slug
    var serviceSlug = serviceName.toLowerCase().replace(/[^a-z]+/g, '-')+ selectedServiceId;

    // Construct the URL using the service slug
    var serviceUrl = '/service/' + serviceSlug;

    // Update the browser URL without reloading the page
    history.pushState({}, serviceName, serviceUrl);

    $.ajax({
        url: '/get-service-details/' + selectedServiceId, // Replace with the actual route for fetching service details
        type: 'GET',
        dataType: 'json',
        success: function (data) {
            var serviceDetailsDiv = $('#serviceDetails');
            serviceDetailsDiv.html('<img src="' + data.image + '" alt="Service Image" style="max-width: 100%;">');
            var descriptionHtml = '<div style="margin-top: 10px;">';
            descriptionHtml += '<h4>Description</h4>';
            descriptionHtml += '<p style="font-size: 16px; color: #333;">' + data.description + '</p>';
            descriptionHtml += '</div>';
            
            serviceDetailsDiv.append(descriptionHtml);
        },
        error: function (xhr, status, error) {
            console.error('Error fetching service details: ' + error);
        }
    });
}


    function confirmPurchase() {
        if (confirm('Are you sure you want to proceed with the purchase?')) {
            document.getElementById('purchaseForm').submit();
        }
    }
</script>
@endsection