@extends('layouts.public2')

@section('infosradio', 'Détails E-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;
        }

        .summary-box {
            position: sticky;
            top: 80px;
            /* distance depuis le haut quand elle devient fixe */
            z-index: 100;
        }
    </style>
@endsection

@section('content')
    <main class="main-content h-100">
        <!-- Bandeau d'en-tête -->
        <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" id="peace">
                <div class="p-5 rounded">
                    <h2 class="mb-3">{!! nl2br('E-service : ' . $service->name) !!}</h2>
                </div>
            </div>
        </div>

        <!-- Contenu du service -->
        <section class="bg-color2 px-md-5 p-1 h-100" id="service-content" style="display: block;">
            <div class="bg-white p-4 container-xxl rounded-4 shadow-sm">
                <div class="row">
                    <h4 class="fw-bold mb-3 text-center">{{ $service->name }}</h4>
                    <div class="bg-linear-gradient mb-3" style="padding: 1px;"></div>
                    <!-- Image -->
                    <div class="col-md-4 mb-4">
                        <div class="ratio ratio-1x1">
                            <img src="{{ asset('media/' . $service->image) }}" class="img-fluid rounded-3 object-fit-cover"
                                alt="{{ $service->name }}">
                        </div>
                    </div>

                    <!-- Description -->
                    <div class="col-md-8 mb-4">
                        <div class="service-description">{!! $service->description !!}</div>
                        <table class="table table-bordered table-striped mt-2">
                            <thead>
                                <tr>
                                    <th colspan="3">Détails des Diffusions</th>
                                </tr>
                                <tr>
                                    <th width="50%">Heure</th>
                                    <th width="50%">Montant (CFA)</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($service->pricings as $item)
                                    <tr>
                                        <td>{{ $item->time_slot }}</td>
                                        <td>{{ number_format($item->price, 0, ',', ' ') }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="text-center mt-4">
                    <button class="btn gradient-btn" id="show-demand-form">Faire une demande</button>
                </div>
            </div>
        </section>
        <section class="bg-color2 px-md-5 p-1 h-100" id="demand-form" style="display: none">
            <div class="p-4 container-xxl rounded-4 shadow-sm" style="background: #dae1e8b0;">
                <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 ce 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('client.e-service.submit', $service->id) }}" enctype="multipart/form-data">
                                @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 id="programme-container">
                                        <div class="card rounded-3 border-opacity-10 mt-3 p-3 programme-item">
                                            <div class="d-flex justify-content-end">
                                                <button type="button" class="btn btn-danger btn-sm"
                                                    onclick="this.closest('.card').remove(); updateSummary()">
                                                    <i class="bi bi-x mr-2"></i>
                                                </button>
                                            </div>
                                            <div class="row g-3">
                                                <div class="col-md-8">
                                                    <label class="form-label fw-semibold" for="type">Heure de
                                                        diffusion</label>
                                                    <div class="d-flex flex-wrap gap-1">
                                                        @foreach ($service->pricings as $horaire)
                                                            <div class="form-check form-check-inline">
                                                                <input class="form-check-input pricing-checkbox"
                                                                    type="checkbox" name="pricings[]"
                                                                    value="{{ $horaire->id }}"
                                                                    data-price="{{ $horaire->price }}"
                                                                    id="check-{{ $horaire->id }}-0">
                                                                <!-- id unique par ligne à gérer dynamiquement -->
                                                                <label class="form-check-label"
                                                                    for="check-{{ $horaire->id }}-0">
                                                                    {{ $horaire->time_slot }} ({{ $horaire->price }} FCFA)
                                                                </label>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>

                                                <div class="col-md-4">
                                                    <label for="broadcast_date" class="form-label fw-semibold">Date</label>
                                                    <input type="date" class="form-control broadcast-date"
                                                        name="broadcast_date[]" id="broadcast_date-0">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="d-flex justify-content-end mt-3">
                                        <button type="button" class="text-right btn btn-secondary mb-3"
                                            onclick="addProgram()">Ajouter</button>
                                    </div>
                                    @if ($service->production_fees_available)
                                        <div class="card rounded-3 border-opacity-10 mt-3 p-3">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="production_fees"
                                                    name="production_fees" value="{{ $service->production_fees }}"
                                                    data-price="{{ $service->production_fees }}">
                                                <label class="form-check-label fw-semibold" for="production_fees">
                                                    Inclure les frais de production ({{ number_format($service->production_fees, 0, ',', ' ') }} FCFA)
                                                </label>
                                            </div>
                                        </div>
                                    @endif

                                </div>
                                <div id="step2" style="display: none">

                                    <div class="mb-3">
                                        <label for="files" class="form-label fw-semibold">Documents <span
                                                class="text-danger">*</span></label><br>
                                        <input type="file" class="form-control" id="files" name="uploads[]"
                                            multiple accept="doc,pdf,docx,txt,zip,jpeg,jpg,png">
                                        <small>Obligatoire: 1 fichiers Maximum: 3 fichiers Taille maximale du fichier: 10
                                            MB</small>
                                    </div>

                                    <div class="mb-3">
                                        <label class="form-label fw-semibold" for="content">Message <span
                                                class="text-danger"></span></label>
                                        <textarea class="form-control" name="content" id="content" cols="30" rows="5"
                                            placeholder="Décrivez votre demande de service"></textarea>
                                        <small>Obligatoire: 20 caractères minimum</small>
                                    </div>
                                </div>

                                <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 mt-2">
                                <span>Nombre de date</span>
                                <strong id="date_number">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>
            </div>
        </section>

        <section class="bg-color2 pb-3"></section>
    </main>
@endsection

@section('scripts')
    <script>
        document.getElementById('show-demand-form').addEventListener('click', function() {
            document.getElementById('demand-form').style.display = 'block';
            document.getElementById('service-content').style.display = 'none';
            this.style.display = 'none';

            document.getElementById('peace').scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
        });
    </script>

    <script>
        // Pour gérer les IDs uniques sur les éléments générés
        let programIndex = 1;

        function addProgram() {
            const container = document.getElementById('programme-container');

            // Générer le HTML avec des IDs uniques basés sur programIndex
            let html = `
            <div class="card rounded-3 mt-3 p-3 programme-item">
                <div class="d-flex justify-content-end">
                    <button type="button" class="btn btn-danger btn-sm" onclick="this.closest('.card').remove(); updateSummary()">
                        <i class="bi bi-x mr-2"></i>
                    </button>
                </div>
                <div class="row g-3">
                    <div class="col-md-8">
                        <label class="form-label fw-semibold" for="type">Heure de diffusion</label>
                        <div class="d-flex flex-wrap gap-1">
                            @foreach ($service->pricings as $horaire)
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input pricing-checkbox" type="checkbox"
                                        name="pricings[]" value="{{ $horaire->id }}" data-price="{{ $horaire->price }}"
                                        id="check-{{ $horaire->id }}-${programIndex}">
                                    <label class="form-check-label" for="check-{{ $horaire->id }}-${programIndex}">
                                        {{ $horaire->time_slot }} ({{ $horaire->price }} FCFA)
                                    </label>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <div class="col-md-4">
                        <label for="broadcast_date" class="form-label fw-semibold">Date</label>
                        <input type="date" class="form-control broadcast-date" name="broadcast_date[]" id="broadcast_date-${programIndex}">
                    </div>
                </div>
            </div>
        `;

            container.insertAdjacentHTML('beforeend', html);

            // Ajouter les event listeners sur les nouveaux inputs
            attachListeners();

            programIndex++;
            updateSummary();
        }

     function updateSummary() {
    const cards = document.querySelectorAll('.programme-item');
    let datesSet = new Set();
    let total = 0;

    // Somme des diffusions choisies
    cards.forEach(card => {
        const dateInput = card.querySelector('.broadcast-date');
        if (dateInput && dateInput.value) {
            datesSet.add(dateInput.value);
        }

        const checkedCheckboxes = card.querySelectorAll('.pricing-checkbox:checked');
        checkedCheckboxes.forEach(checkbox => {
            total += Number(checkbox.dataset.price);
        });
    });

    // Ajouter frais de production si choisi
    const productionCheckbox = document.getElementById('production_fees');
    if (productionCheckbox && productionCheckbox.checked) {
        total += Number(productionCheckbox.dataset.price);
    }

    document.getElementById('date_number').textContent = datesSet.size;
    document.getElementById('total_amount').textContent = total.toLocaleString() + ' F CFA';
}

        // Attacher les écouteurs d'événement à tous les inputs (checkboxes et date)
        function attachListeners() {
            document.querySelectorAll('.pricing-checkbox').forEach(cb => {
                cb.onchange = updateSummary;
            });

            document.querySelectorAll('.broadcast-date').forEach(dateInput => {
                dateInput.onchange = updateSummary;
            });

            const productionCheckbox = document.getElementById('production_fees');
            if (productionCheckbox) {
                productionCheckbox.onchange = updateSummary;
            }
        }

        // Initialisation au chargement de la page
        window.onload = function() {
            attachListeners();
            updateSummary();
        }
    </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'];
                    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 = ['files', '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