@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>Imagenes del Terreno</h1>
            <p>Administra las imagenes del terreno - {{ $land->title }}</p>
        </div>

        @if ($land->images->count() == 0)
            <div style="text-align: center; margin-bottom: 75px; margin-top: 75px; font-size: 15px; color:grey;"> 
                Sin imagenes
            </div>
        @else
            <div class="images-terreno">
                @foreach ($land->images as $image)
                    <div class="image">
                        <img src="{{ asset($image->full_name) }}" alt="" srcset="">
                        <form action="{{ route('images.destroy', $image->id) }}" method="post">
                            @csrf
                            @method('DELETE')

                            <button>Eliminar</button>
                        </form>
                    </div>
                @endforeach
            </div>
        @endif

        <form id="upload-images" action="{{ route('images.store') }}" enctype="multipart/form-data" method="POST">
            @csrf
            <input type="hidden" name="land_id" value="{{ $land->id }}">

            <div class="input">
                <input type="file" style="padding:7px;" id="files" name="files[]" multiple accept="image/*" />

                @error('files.*')
                    <span role="alert" style="margin-top:10px; font-size:15px; color:red;">
                        {{ $message }}
                    </span>
                @enderror
            </div>

            <button class="btn-submit" type="submit">Cargar imagen <i class="fa-solid fa-cloud-arrow-up"></i></button>

            <br />
            <br />

            <a href="{{ route('lands.index') }}">
                <button class="btn-submit" type="button" style="background: green;">Listo <i class="fa-solid fa-check"></i></button>
            </a>
        </form>
    </div>
@endsection