@extends('layouts.app')

@section('content')
    <div class="container" style="margin-bottom: 75px;">

        <a href="{{ route('panel.index') }}">
            <button class="btn-back">
                <svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"
                    xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"></path>
                </svg>
                Volver atrás
            </button>
        </a>

        <div class="titles-section">
            <h1>Todos tus Terrenos</h1>
            <p>Aquí se muestran todos tus terrenos</p>
        </div>

        <div class="lands">
            @foreach ($lands as $land)
                <div class="land">
                    <div class="image"
                        style="background-image: url('{{ asset($land->file_name ? $land->file_name : 'img/default.jpg') }}')">
                    </div>
                    <div class="items">
                        <div class="details">

                            <div class="status {{ $land->approved == 1 ? 'approved' : 'pending' }}">
                                @if ($land->approved == 1)
                                    <svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"
                                        xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                            d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                    </svg>
                                    Aprobado
                                @else
                                    <svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"
                                        xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                            d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                    </svg>
                                    Pendiente de aprobación
                                @endif
                            </div>

                            <h4 class="payability">Facilidad de pagos: {{ $land->payability }}</h4>
                           
                            <h4 class="title">{{ $land->title }}</h4>

                            <div class="price">{{ $land->price }}</div>

                            <div class="description">
                                {!! $land->description !!}
                            </div>

                            <div class="location">
                                <svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"
                                    xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                        d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                        d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z">
                                    </path>
                                </svg>
                                {{ $land->city->name }}
                            </div>
                        </div>

                        <div class="actions">

                            @if (auth()->user()->IsAdmin())
                                <form action="{{ route('lands.order', $land->id) }}" method="post" class="order-form">
                                    @csrf
                                    @method('PUT')
                                    <select name="order" id="order" class="select_order">
                                        <option value="">Posición</option>
                                        @for ($i = 1; $i <= $lands->count(); $i++)
                                            <option value="{{ $i }}" {{ $i == $land->order ? 'selected' : '' }}>
                                                {{ $i }}</option>
                                        @endfor
                                    </select>
                                </form>

                                <form action="{{ route('lands.group', $land->id) }}" method="post" class="order-form">
                                    @csrf
                                    @method('PUT')
                                    <select name="group" id="group" class="select_order">
                                        <option value="">Sin grupo</option>

                                        @foreach ($groups as $group)
                                            <option value="{{ $group->id }}"
                                                {{ $group->id == $land->group_id ? 'selected' : '' }}>
                                                {{ $group->name }}</option>
                                        @endforeach

                                    </select>
                                </form>
                            @endif

                            <a href="{{ route('lands.show', $land->slug) }}">
                                <button class="btn" style="background-color: #2ecc71;">
                                    <i class="fa-regular fa-eye"></i> Ver
                                </button>
                            </a>

                            <a href="{{ route('lands.edit', $land->id) }}">
                                <button class="btn">
                                    <i class="fa-regular fa-pen-to-square"></i> Editar
                                </button>
                            </a>

                            <form id="delete-form" style="display: none;" action="{{ route('lands.destroy', $land->id) }}"
                                method="POST">
                                @csrf
                                @method('DELETE')
                            </form>

                            <a href="#"
                                onclick="return confirmDelete('Eliminar propiedad!', '¿Estás segura de que quieres eliminar?');">
                                <button class="btn" style="background-color: #d63031;">
                                    <i class="fa-solid fa-trash"></i> Eliminar
                                </button>
                            </a>

                            @if (
                                !$land->approved &&
                                    auth()->user()->IsAdmin())
                                <form action="{{ route('lands.approved', $land->id) }}" method="post">
                                    @csrf
                                    @method('PUT')
                                    <button class="btn" style="background-color: #FACC00; color: #AE2121;"><i
                                            class="fa-solid fa-thumbs-up"></i> Aprobar</button>
                                </form>
                            @endif

                            @if (auth()->user()->IsAdmin() && $land->approved)
                                <form action="{{ route('lands.stateShow', $land->id) }}" method="post">
                                    @csrf
                                    @method('PUT')
                                    <button class="btn" style="background-color: #FACC00; color: #AE2121;">
                                        @if ($land->show)
                                            <svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"
                                                xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                    d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88">
                                                </path>
                                            </svg>
                                            Ocultar
                                        @else
                                            <svg fill="none" stroke="currentColor" stroke-width="1.5"
                                                viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
                                                aria-hidden="true">
                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                    d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z">
                                                </path>
                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                            </svg>
                                            Mostrar
                                        @endif
                                    </button>
                                </form>
                            @endif
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        {{ $lands->links('pagination::bootstrap-5') }}

    </div>
@endsection

@section('scripts')
    <script>
        function confirmDelete(title, message) {
            Swal.fire({
                title: 'Eliminar propiedad',
                text: '¿Estás seguro de que quieres eliminar?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#FD2F30',
                confirmButtonText: 'Sí, eliminar',
                cancelButtonText: 'Cancelar',
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById('delete-form').submit();
                }
            });
        }

        const formElements = document.querySelectorAll('.order-form');

        formElements.forEach((form, index) => {
            const select = form.querySelector('.select_order');

            select.addEventListener('change', function() {
                form.submit();
            });
        });
    </script>
@endsection