@extends('layouts.client')
@php $page_tite = 'Mon espace';@endphp
@section('meta-title', 'Espace client')
@section('meta-keywords', '')
@section('meta-description', '')
@section('style')
    <style>
        #ui-id-1 {
            height: inherit;
            width: inherit !important;
        }
    </style>
@endsection
@section('content')
    <div class="loader">
        <div></div>
    </div>

    @php
        $icons = [
            'Hall d’entrée' => 'pipcke-new-project-select-room-entrance.svg',
            'Salon' => 'pipcke-new-project-select-room-living-room.svg',
            'Séjour' => 'pipcke-new-project-select-room-guest-room.svg',
            'Salle à manger' => 'pipcke-new-project-select-room-dining-room.svg',
            'Chambre adulte' => 'pipcke-new-project-select-room-bedroom.svg',
            'Chambre enfant' => 'pipcke-new-project-select-room-kids-room.svg',
            'Chambre bébé' => 'pipcke-new-project-select-room-nursery.svg',
            'Dressing' => 'pipcke-new-project-select-room-dressing.svg',
            'Cuisine' => 'pipcke-new-project-select-kitchen.svg',
            'Salle de bains' => 'pipcke-new-project-select-bathroom.svg',
            'Bureau' => 'pipcke-new-project-select-office.svg',
            'Terrasse' => 'pipcke-new-project-select-terrace.svg',
            'Espace ouvert' => 'pipcke-new-project-open-space.svg',
            'Studio' => 'pipcke-new-project-select-studio.png',
            'Espace commercial' => 'pipcke-new-project-select-prof.png',
        ];
    @endphp

    <div class="row">
        <div class="col-md-12">
            @if (empty($data))
                <div class="p-3">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="welcome-card">
                                <div class="welcome-card-header welcome-header" style="text-transform: capitalize;">
                                    Bonjour {{ auth()->user()->prenom }} !
                                </div>
                                <div class="welcome-card-body">
                                    <div>
                                        <p class="text-black">Bienvenue dans votre espace,<br>Commencez par créer un nouveau
                                            projet !
                                        </p>
                                    </div>

                                    <div class="text-right text-left-mobile welcome-card-btn">
                                        <a href="{{ route('nouveauprojet') }}"
                                            class="btn btn-sm btn2 btn-formulaire">{!! lang('Démarrer un nouveau projet') !!}</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="consultation-box">
                                <div class="welcome-card">
                                    <div class="welcome-card-header consultation-header">
                                        Consultation
                                    </div>
                                    <div class="welcome-card-body">
                                        <div>
                                            <p class="text-black">Vous avez des questions d’aménagement spécifiques ?<br>
                                                Vous manquez d’inspiration pour le choix de mobilier, d'objets décoratifs, …
                                                ?<br>
                                                Nos designers sont là pour vous aider !<br>
                                                Obtenez gratuitement une réponse à votre question par l’un de nos
                                                architectes d’intérieur.<br>
                                            </p>
                                        </div>
                                        <div class="text-right text-left-mobile welcome-card-btn">
                                            <a href="{{ route('client.mesconsultations') }}"
                                                class="btn btn-sm btn2 btn-formulaire">{!! lang('Consulter un designer') !!}</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
    @else
        <div class="row">
            <div class="col-md-12">
                <div class="p-3">
                    <div class="panel text-center pt-5 mb-0 welcome-panel">
                        <div class="row">
                            <div class="col-md-6">
                                <p class="font-size-20 text-left" style="text-transform: capitalize;">
                                    Hello {{ auth()->user()->prenom }} !
                                </p>
                            </div>
                            <div class="col-md-6 text-right text-left-mobile">
                                <a href="{{ route('nouveauprojet') }}"
                                    class="btn btn-sm btn2 btn-formulaire">{!! lang('Démarrer un nouveau projet') !!}</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="p-3">
                    <div class="sort-controls row">
                        <form action="" class="row col-md-8 filters mt-4 m-auto" id="realisation-filter-form">
                            <div class="col-md-2">

                            </div>
                            <div class="col-md-4">
                                <div class="form-group form-inline">
                                    <label for="">Trier par date :</label>
                                    <select class="form-control filter-time" name="time" id="time_select">
                                        <option value="desc" selected id="sortDateDesc">Du plus récent</option>
                                        <option value="asc" id="sortDateAsc">Du plus ancien</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group form-inline">
                                    @php
                                        $statuses = array_unique(array_column($data, 'status'));
                                    @endphp
                                    <label for="">Trier par statut :</label>
                                    <select class="form-control filter-status" name="status" id="status_select">
                                        <option value="">Tous les statuts</option>
                                        @foreach ($statuses as $item)
                                            <option value="{{ $item }}">{{ $item }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">

                            </div>
                        </form>
                    </div>
                    <div class="data-container">
                        @foreach ($data as $item)
                            <div class="welcome-card">
                                <div class="welcome-header panel-projet">
                                    <div class="row">
                                        <div class="col-auto show-more" style="width: 50px;">
                                            <div class="m-auto ">
                                            </div>
                                        </div>
                                        <div class="col-md-5">
                                            <p class="project_name mt-4 d-block">
                                                {{ \Carbon\Carbon::parse($item['date'])->format('d-m-Y') }}</p>
                                        </div>

                                        <div class="col text-right">
                                            <p class="status_name mt-4 d-block font-size-20 text-black">
                                                @if ($item['status'] == 'Choisir mon offre')
                                                    Choix de l'offre
                                                @else
                                                    @if ($item['status'] == 'Esquisse')
                                                        Concept d'idées
                                                    @else
                                                        {{ $item['status'] }}
                                                    @endif
                                                @endif
                                            </p>
                                        </div>

                                        <div class="col-1 text-right delete-col">
                                            @if ($item['status'] == 'Choisir mon offre')
                                                @if ($item['type'] == 'group')
                                                    <a href="{{ route('client.group.delete', $item['id']) }}"
                                                        data-message="Êtes-vous sûr de vouloir supprimer ces projets"
                                                        class="font-size-20 confirmation-delete">
                                                        <i class="fa fa-trash"></i>
                                                    </a>
                                                @else
                                                    <a href="{{ route('client.projet.delete', $item['id']) }}"
                                                        data-message="Êtes-vous sûr de vouloir supprimer ces projets"
                                                        class="font-size-20 confirmation-delete">
                                                        <i class="fa fa-trash"></i>
                                                    </a>
                                                @endif
                                            @endif
                                        </div>
                                    </div>
                                </div>

                                @if ($item['type'] == 'group')
                                    <div class="card-content p-5">
                                        @foreach ($item['projets'] as $index => $p)
                                            <div class="row align-items-center more-content">
                                                <div class="col-md-9 d-flex align-items-center mb-3 mb-md-0">
                                                    <figure class="fancy-box-imae fancy-box-image">
                                                        @if (isset($icons[$p['espace']]))
                                                            <img width="70"
                                                                src="{{ asset('assets/quiz/icons/' . $icons[$p['espace']]) }}"
                                                                alt="Icon">
                                                        @else
                                                            <img width="70"
                                                                src="{{ asset('assets/quiz/icons/pipcke-new-project-other-room.svg') }}"
                                                                alt="Default Icon">
                                                        @endif
                                                    </figure>
                                                    <div class="project-details">
                                                        <h3 class="mb-1">{{ $p['nom'] ?? $p['espace'] }}</h3>
                                                        @if ($p['forfait_conception'] || $p['forfait'])
                                                            <p class="mb-0 forfait_projet_type">Forfait
                                                                {{ $p['forfait_conception'] ?? $p['forfait'] }}</p>
                                                        @endif
                                                    </div>
                                                </div>
                                                <div class="col-md-3 text-md-right text-center">
                                                    @if ($index == 0)
                                                        <a href="{{ $item['route'] }}"
                                                            class="btn btn-sm btn2 rounded font-weight-semibold hide-on-mobile">
                                                            {{ lang('Accéder au projet') }} <i
                                                                class="fa fa-chevron-right ml-2"></i>
                                                        </a>
                                                    @endif
                                                </div>
                                            </div>
                                        @endforeach

                                        <div class="row display-on-mobile m-auto">
                                            <a href="{{ $item['route'] }}"
                                                class="btn btn-sm btn2 rounded font-weight-semibold">
                                                {{ lang('Accéder au projet') }} <i class="fa fa-chevron-right ml-2"></i>
                                            </a>
                                        </div>
                                    </div>
                                @else
                                    <div class="card-content p-5">
                                        <div class="row align-items-center more-content">
                                            <div class="col-md-9 d-flex align-items-center mb-3 mb-md-0">
                                                <figure class="fancy-box-imae fancy-box-image">
                                                    @if (isset($icons[$item['espace']]))
                                                        <img width="70"
                                                            src="{{ asset('assets/quiz/icons/' . $icons[$item['espace']]) }}"
                                                            alt="Icon">
                                                    @else
                                                        <img width="70"
                                                            src="{{ asset('assets/quiz/icons/pipcke-new-project-other-room.svg') }}"
                                                            alt="Default Icon">
                                                    @endif
                                                </figure>
                                                <div class="project-details">
                                                    <h3 class="mb-1">{{ $item['nom'] ?? $item['espace'] }}</h3>
                                                    @if ($item['forfait'])
                                                        <p class="mb-0 forfait_projet_type">Forfait
                                                            {{ $item['forfait'] }}</p>
                                                    @endif
                                                </div>
                                            </div>
                                            <div class="col-md-3 text-md-right text-center">
                                                <a href="{{ $item['route'] }}"
                                                    class="btn btn-sm btn2 rounded font-weight-semibold hide-on-mobile">
                                                    {{ lang('Accéder au projet') }} <i
                                                        class="fa fa-chevron-right ml-2"></i>
                                                </a>
                                            </div>
                                        </div>
                                        <div class="row display-on-mobile m-auto">
                                            <a href="{{ $item['route'] }}"
                                                class="btn btn-sm btn2 rounded font-weight-semibold">
                                                {{ lang('Accéder au projet') }} <i class="fa fa-chevron-right ml-2"></i>
                                            </a>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
        @endif
    </div>
    </div>
@endsection

@section('style')
    <style>
        .toggle-menu {
            display: none;
        }

        .mobile_hr {
            display: none;
        }

        @media all and (max-width: 500px) {
            .mobile_hr {
                display: block;
                border-top: 1px solid black;
                width: 100%;
                margin-top: 10px !important;
                margin-bottom: 10px !important;
            }
        }
    </style>
@endsection
<script src="{{ asset('js/jquery-3.2.1.min.js') }}"></script>
<script src="{{ asset('js/jquery-ui.min.js') }}"></script>
<script>
    $(document).ready(function() {
        let isDateSorted = 'desc'; // Default sort by Date Descending

        var deleteGroupRoute = "{{ route('client.group.delete', '__id__') }}";
        var deleteProjetRoute = "{{ route('client.projet.delete', '__id__') }}";
        var assetUrl = "{{ asset('assets/quiz/icons/') }}";
        var langAcceder = "{{ __('Accéder au projet') }}";
        var icons = @json($icons);

        // Handle sorting by date
        $('#time_select').on('change', function() {
            const selectedOrder = $(this).val();
            $('#status_select').val('');
            $('#status_select-button').find('span.ui-selectmenu-text').text('Tous les status');
            if (selectedOrder === 'asc' && selectedOrder !== isDateSorted) {
                isDateSorted = 'asc';
                sortData('asc');
            } else if (selectedOrder === 'desc' && selectedOrder !== isDateSorted) {
                isDateSorted = 'desc';
                sortData('desc');
            }
        });

        // Handle filtering by status
        $('#status_select').on('change', function() {
            $('#time_select').val('desc'); // Reset time select
            $('#time_select-button').find('span.ui-selectmenu-text').text('Du plus récent');
            const selectedStatus = $(this).val(); // Get selected status
            if (selectedStatus.trim() === '') {
                // If "Tous les statuts" is selected, reset the status filter
                isDateSorted = 'desc'; // Default to descending
                sortData('desc');
            } else {
                isDateSorted = ''; // Clear date sort state
                $.ajax({
                    url: '{{ route('client.filterByStatus') }}',
                    type: 'GET',
                    data: {
                        status: selectedStatus
                    },
                    success: function(response) {
                        renderData(response.data);
                    },
                    error: function() {
                        alert('Error filtering data');
                    }
                });
            }
        });

        // Function to sort data by date
        function sortData(order) {
            $.ajax({
                url: '{{ route('client.sortByDate') }}',
                type: 'GET',
                data: {
                    order: order
                },
                success: function(response) {
                    renderData(response.data);
                },
                error: function() {
                    alert('Error sorting data');
                }
            });
        }

        function formatDate(dateString) {
            const date = new Date(dateString);
            return date.toLocaleDateString('en-GB').replace(/\//g, '-'); // 'en-GB' formats as dd/mm/yyyy
        }


        function renderData(data) {
            let container = $(".data-container");
            container.html(""); // Clear existing content

            let contentHtml = "";

            data.forEach(item => {
                const formattedDate = formatDate(item.date);
                // Card Header
                let header = `
            <div class="welcome-card">
                <div class="welcome-header panel-projet">
                    <div class="row">
                        <div class="col-auto show-more" style="width: 50px;">
                            <div class="m-auto"></div>
                        </div>
                        <div class="col-md-5">
                            <p style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
                                class="project_name mt-4 d-block ">${formattedDate}</p>
                        </div>
                        <div class="col text-right">
                           <p class="status_name mt-4 d-block font-size-20 text-black">
                                ${
                                    item.status === "Choisir mon offre"
                                        ? `Choix de l'offre`
                                        : item.status === "Esquisse"
                                        ? `Concept d'idées`
                                        : `${item.status}`
                                }
                            </p>
                        </div>
                        <div class="col-1 text-right delete-col">
                            ${
                                item.status === "Choisir mon offre"
                                    ? item.type === "group"
                                        ? `<a href="${item.deleteRouteGroup}" 
                                            data-message="Êtes-vous sûr de vouloir supprimer ces projets"
                                            class="font-size-20 confirmation-delete">
                                            <i class="fa fa-trash"></i>
                                        </a>`
                                        : `<a href="${item.deleteRouteProject}" 
                                            data-message="Êtes-vous sûr de vouloir supprimer ces projets"
                                            class="font-size-20 confirmation-delete">
                                            <i class="fa fa-trash"></i>
                                        </a>`
                                    : ""
                            }
                        </div>
                    </div>
                </div>
        `;

                // Card Content
                let content = "";
                if (item.type === "group") {
                    content += `<div class="card-content p-5">`;
                    content += item.projets
                        .map((p, index) => `
        <div class="row align-items-center more-content">
            <div class="col-md-9 d-flex align-items-center mb-3 mb-md-0">
                <figure class="fancy-box-imae fancy-box-image">
                    <img width="70" 
                        src="${icons[p.espace] ? assetUrl + '/' + icons[p.espace] : assetUrl + '/pipcke-new-project-other-room.svg'}"
                        alt="Icon">
                </figure>
                <div class="project-details">
                    <h3 class="mb-1">${p.nom || p.espace}</h3>
                    ${
                        p.forfait_conception || p.forfait
                            ? `<p class="mb-0 forfait_projet_type">Forfait ${p.forfait_conception || p.forfait}</p>`
                            : ""
                    }
                </div>
            </div>
            <div class="col-md-3 text-md-right text-center">
                ${
                    index === 0 
                        ? `<a href="${item.route}" 
                             class="btn btn-sm btn2 rounded font-weight-semibold hide-on-mobile">
                             Accéder au projet <i class="fa fa-chevron-right ml-2"></i>
                           </a>`
                        : ""
                }
            </div>
        </div>`)
                        .join('');

                    content += `<div class="row display-on-mobile m-auto">
                        <a href="${item.route}" class="btn btn-sm btn2 rounded font-weight-semibold">
                            {{ lang('Accéder au projet') }} <i class="fa fa-chevron-right ml-2"></i>
                        </a>
                    </div>
                    </div>`;
                } else {
                    content += `
                <div class="card-content p-5">
                    <div class="row align-items-center more-content">
                        <div class="col-md-9 d-flex align-items-center mb-3 mb-md-0">
                            <figure class="fancy-box-imae fancy-box-image">
                                <img width="70" 
                                    src="${icons[item.espace] ? assetUrl + '/' + icons[item.espace] : assetUrl + '/pipcke-new-project-other-room.svg'}"
                                    alt="Icon">
                            </figure>
                            <div class="project-details">
                                <h3 class="mb-1">${item.nom || item.espace}</h3>
                                ${
                                    item.forfait
                                        ? `<p class="mb-0">Forfait ${item.forfait}</p>`
                                        : ""
                                }
                            </div>
                        </div>
                        <div class="col-md-3 text-md-right text-center">
                            <a href="${item.route}" 
                                class="btn btn-sm btn2 rounded font-weight-semibold hide-on-mobile">
                                Accéder au projet <i class="fa fa-chevron-right ml-2"></i>
                            </a>
                        </div>
                    </div>
                    <div class="row display-on-mobile m-auto">
                        <a href="${item.route}" class="btn btn-sm btn2 rounded font-weight-semibold">
                            {{ lang('Accéder au projet') }} <i class="fa fa-chevron-right ml-2"></i>
                        </a>
                    </div>
                </div>`;
                }

                // Combine Header and Content
                contentHtml += header + content + `</div>`;
            });

            // Update the container
            container.html(contentHtml);
        }




    });
</script>