@extends('layouts.public')
@section('infosradio', 'Services')
@section('radio_name', $radio->name)
@section('radio_description', $radio->description)
@section('radio_contact', $radio->phone)
@section('radio_adresse', $radio->address)
@section('radio_email', $radio->email)

@section('css')
    <style>
        .form-box {
            background: white;
            border-radius: 15px;
            padding: 2rem;
        }

        .form-control {
            border-radius: 10px;
        }

        .summary-box {
            background: white;
            border-radius: 15px;
            padding: 1.5rem;
        }

        .stepper {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 2rem;
            padding: 0 10px;
        }

        .step-line {
            width: 50%;
            top: 50%;
            left: 0;
            right: 0;
            height: 4px;
            background-color: #e1e1e8;
            z-index: 0;
            transform: translateY(-50%);
        }

        .step-line-completed {
            width: 50%;
            top: 50%;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(45deg, #b04166, #824198);
            z-index: 0;
            transform: translateY(-50%);
        }

        .step {
            z-index: 1;
            text-align: center;
            flex: 1;
        }

        .step .circle {
            margin: 0 auto;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 4px solid #e1e1e8;
            background-color: white;
        }

        .step.active .circle {
            border: 4px solid #b04166;
            border-radius: 50%;
        }

        .step.completed .circle {
            border: 4px solid #b04166;
            border-radius: 50%;
        }

        .step.completed .label {
            background: linear-gradient(45deg, #b04166, #824198);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .step .label {
            font-size: 0.9rem;
            color: #999;
            margin-top: 0.25rem;
        }

        .step.active .label {
            background: linear-gradient(45deg, #b04166, #824198);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        hr.gradient-line {
            height: 1px;
            background: linear-gradient(135deg, #b7410e, #6c3483);
            border: none;
        }
    </style>
@endsection
@section('content')
    <main class="main-content h-100">
        <div class="position-relative overflow-hidden" style="height: 200px;">
            <img src="{{ asset('images/G7.jpg') }}" class="w-100 h-100 position-absolute top-0 start-0 object-fit-cover"
                style="filter: blur(5px); z-index: 0;" alt="Background flou">

            <div class="position-relative z-1 text-white d-flex align-items-center justify-content-center h-100">
                <div class="p-5 rounded">
                    <h2 class="mb-3">{!! nl2br('Espace E-services : ' . $radio->name) !!}</h2>
                </div>
            </div>
        </div>
        <section class="bg-color2 p-md-5 p-1 h-100">
            <div class="p-4 container-xxl rounded-4 shadow-sm" style="background: #dae1e8b0;">
                @if ($request_type->count() > 0)
                    <div class="row g-4">
                        <div class="col-lg-8">
                            <div class="form-box shadow-lg">
                                <h3 class="fw-bold mb-4">Faites votre demande de service</h3>

                                <div class="stepper">
                                    <div class="step active">
                                        <div class="circle"></div>
                                        <div class="label">Etape 1</div>
                                    </div>
                                    <div class="step-line"></div>
                                    <div class="step">
                                        <div class="circle"></div>
                                        <div class="label">Etape 2</div>
                                    </div>
                                </div>
                                <span id="msgSubmit" class="h3 text-center hidden" style="font-size: 1.25em;"></span>
                                <form id="request-form" method="post" action="{{ route('request.store', $radio->id) }}">
                                    @csrf
                                    <div id="step1">

                                        <div class="mb-3">
                                            <label for="name" class="form-label fw-semibold">Nom et prénoms</label>
                                            <input type="text" class="form-control" id="name" name="name"
                                                placeholder="Entrez votre nom complet">
                                        </div>

                                        <div class="row g-3">
                                            <div class="col-md-6">
                                                <label class="form-label fw-semibold" for="email">Email</label>
                                                <input type="email" name="email" class="form-control" id="email"
                                                    placeholder="Entrez votre email">
                                            </div>
                                            <div class="col-md-6">
                                                <label class="form-label fw-semibold" for="contact">Contact</label>
                                                <input type="text" class="form-control" name="contact" id="contact"
                                                    placeholder="Entrez votre contact">
                                            </div>
                                        </div>

                                        <div class="row mt-3 g-3">
                                            <div class="col-md-6">
                                                <label class="form-label fw-semibold" for="type">Type de service</label>
                                                <select name="type" id="type" class="form-select"
                                                    onchange="calculateMount()">
                                                    <option selected disabled value="">
                                                        Sélectionnez le type de service que vous souhaitez
                                                    </option>
                                                    @foreach ($request_type as $i => $req)
                                                        <option value="{{ $req->id }}">
                                                            {{ $req->name }} ({{ $req->price }} FCFA)
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-md-6">
                                                <label for="broadcast_number" class="form-label fw-semibold">Nombre de
                                                    diffusion</label>
                                                <select name="broadcast_number" id="broadcast_number" class="form-select"
                                                    onchange="calculateMount()">
                                                    <option selected disabled value="">
                                                        Sélectionnez le nombre de diffusion
                                                    </option>
                                                    @foreach ($broadcast_numbers as $number)
                                                        <option value="{{ $number }}">
                                                            {{ $number }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="step2" style="display: none">

                                        <div class="mb-3">
                                            <label for="objet" class="form-label fw-semibold">Objet</label>
                                            <input type="text" class="form-control" name="objet" id="objet"
                                                placeholder="Entrez l'objet de votre requête">
                                        </div>


                                        <div class="mb-3">
                                            <label class="form-label fw-semibold" for="content">Message</label>
                                            <textarea class="form-control" name="content" id="content" cols="30" rows="5"
                                                placeholder="Décrivez votre demande de service"></textarea>
                                        </div>
                                    </div>

                                    <input type="hidden" id="amount" name="amount" value="0">
                                    <div class="mt-4 d-flex justify-content-end">
                                        <button id="back_btn" class="btn gradient-outline"
                                            style="display: none;">Retour</button> &nbsp;&nbsp;
                                        <button id="submit_btn" type="submit"
                                            class="btn gradient-btn">Continuer</button>
                                    </div>
                                </form>
                            </div>
                        </div>

                        <div class="col-lg-4">
                            <div class="summary-box shadow-lg">
                                <div class="d-flex justify-content-between">
                                    <span>Prix service</span>
                                    <strong id="price_service">0 CFA</strong>
                                </div>
                                <div class="d-flex justify-content-between mt-2">
                                    <span>Nombre de diffusion</span>
                                    <strong id="broadcast">0</strong>
                                </div>
                             

                                <hr class="gradient-line mt-3">

                                <div class="d-flex justify-content-between">
                                    <strong>Total</strong>
                                    <strong id="total_amount">0 CFA</strong>
                                </div>
                            </div>

                        </div>
                    </div>
                @else
                    <div class="bg-white rounded-3 p-5 shadow-sm col-lg-12">
                        <div class="text-center mx-auto font-weight-bold">
                            <i class="fa fa-inbox fa-4x text-black"></i> <br>
                            <h3>Aucun service disponible pour le moment !</h3>
                        </div>
                    </div>
                @endif
            </div>
        </section>
    </main>
@endsection

@section('scripts')
    <script>
        function calculateMount() {
            const prices = @json($prices);
         
            const type_id = document.getElementById('type').value;
            const broadcast_count = parseInt(document.getElementById('broadcast_number').value);

            const selected_price = prices[type_id];

            const price = document.getElementById('price_service');
            const broadcast = document.getElementById('broadcast');
                  const total_amount = document.getElementById('total_amount');
       
            const amount_input = document.getElementById('amount');

            if (selected_price && broadcast_count) {
                const amount = selected_price * broadcast_count;
                const total = amount;

                price.textContent = `${selected_price} CFA`;
                broadcast.textContent = broadcast_count;
                total_amount.textContent = `${total} CFA`;
              

                amount_input.value = amount;
            } else {
                price.textContent = '0 CFA';
                broadcast.textContent = '0';
                total_amount.textContent = '0 CFA';
                amount_input.value = '';
            }
        }
    </script>


    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const submit_btn = document.getElementById('submit_btn');
            const back_btn = document.getElementById('back_btn');
            const step1 = document.getElementById('step1');
            const step2 = document.getElementById('step2');
            const steps = document.querySelectorAll('.step');
            const step_line = document.querySelectorAll('.step-line');
            const form = document.getElementById('request-form');

            submit_btn.addEventListener('click', function(e) {
                e.preventDefault();

                if (step2.style.display == 'none') {
                    const required_fields = ['name', 'email', 'contact', 'type', 'broadcast_number'];
                    let all_filled = true;

                    required_fields.forEach(id => {
                        const input = document.getElementById(id);
                        if (!input.value || input.value.trim() == '') {
                            all_filled = false;
                            input.classList.add('is-invalid');
                        } else {
                            input.classList.remove('is-invalid');
                        }
                    });

                    submit_btn.style.color = "white";

                    if (all_filled) {
                        step1.style.display = 'none';
                        step2.style.display = 'block';

                        steps[0].classList.remove('active');
                        steps[0].classList.add('completed');
                        steps[1].classList.add('active');
                        step_line[0].classList.remove('step-line');
                        step_line[0].classList.add('step-line-completed');

                        submit_btn.textContent = 'Envoyer';
                        back_btn.style.display = 'block';
                    }
                } else {
                    const required_fields = ['objet', 'content'];
                    let all_filled = true;

                    required_fields.forEach(id => {
                        const input = document.getElementById(id);
                        if (!input.value || input.value.trim() == '') {
                            all_filled = false;
                            input.classList.add('is-invalid');
                        } else {
                            input.classList.remove('is-invalid');
                        }
                    });

                    submit_btn.style.color = "white";

                    if (all_filled) {
                        form.requestSubmit();
                    }
                }
            });

            function submitMSG(valid = true, msg, target = "msgSubmit") {
                let msgClasses = "";
                let type = valid ? 'success' : 'danger';

                if (valid) {
                    msgClasses = "tada animated text-" + type;
                } else {
                    msgClasses = "text-" + type;
                }

                $("#" + target).removeClass('tada animated text-danger text-success').addClass(msgClasses).text(
                    msg);
                $("#" + target).parents('.alert').removeClass('alert-danger alert-success d-none').addClass(
                    'alert-' + type);
                $("#" + target).parents('.alert').find('i.fa').removeClass('fa-check-circle fa-times-circle')
                    .addClass(valid ?
                        'fa-check-circle' : 'fa-times-circle');

                $("#" + target)[0].scrollIntoView();
            }

            form.addEventListener('submit', function(e) {
                e.preventDefault();

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });

                let formData = new FormData(form);

                formData.forEach((value, key) => {
                    console.log(`${key}: ${value}`);
                });


          form.submit();

            });

            back_btn.addEventListener('click', function(e) {
                e.preventDefault();

                step2.style.display = 'none';
                step1.style.display = 'block';

                steps[0].classList.add('active');
                steps[0].classList.remove('completed');
                steps[1].classList.remove('active');
                step_line[0].classList.remove('step-line-completed');
                step_line[0].classList.add('step-line');

                submit_btn.textContent = 'Continuer';
                back_btn.style.display = 'none';
            });
        });
    </script>


@endsection