@extends('layouts.admin')

@section('content')

<div class="container mt-5">
    <div class="card">
        <div class="card-header">
            <h2>Edição de Propriedade
                <a href="{{ route('admin.catalog.index')}}" class="btn btn-danger btn-sm text-white float-right">Voltar</a>
            </h2>
        </div>
        <div class="card-body">
            <form method="POST" action="{{ route('admin.catalog.update', $property->id) }}" enctype="multipart/form-data">
                @csrf
                @method('PUT')

                <div class="form-group">
                    <label for="user_id">Selecione o Vendedor</label>
                    <select class="form-control" id="user_id" name="user_id">
                        @foreach($sellers as $seller)
                            <option value="{{ $seller->id }}" {{ $seller->id == $property->user_id ? 'selected' : '' }}>
                                {{ $seller->fullname }} - {{ $seller->email }}
                            </option>
                        @endforeach
                    </select>
                    @error('user_id') <small class="text-danger">{{ $message }}</small> @enderror
                </div>

                <div class="form-group">
                    <label for="name">Nome da Propriedade</label>
                    <input class="form-control" id="name" name="name" value="{{ $property->name }}">
                    @error('name') <small class="text-danger">{{ $message }}</small> @enderror
                </div>

                <div class="form-group">
                    <label for="description">Descrição</label>
                    <textarea class="form-control" id="description" name="description" rows="3">{{ $property->description }}</textarea>
                    @error('description') <small class="text-danger">{{ $message }}</small> @enderror
                </div>

                <div class="form-row">
                    <div class="form-group col-md-4">
                        <label for="vegetation">Vegetação</label>
                        <select class="form-control" id="vegetation" name="vegetation">
                            @foreach($vegetations as $vegetation)
                                <option value="{{ $vegetation->id }}" {{ $vegetation->id == $property->vegetation ? 'selected' : '' }}>
                                    {{ $vegetation->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('vegetation') <small class="text-danger">{{ $message }}</small> @enderror
                    </div>

                    <div class="form-group col-md-4">
                        <label for="acre">Quantidade de Hectares</label>
                        <input type="text" class="form-control" id="acre" name="acre" value="{{ $property->acre }}">
                        @error('acre') <small class="text-danger">{{ $message }}</small> @enderror
                    </div>

                    <div class="form-group col-md-4">
                        <label for="carbon_credits">Créditos de Carbono</label>
                        <input type="text" class="form-control" id="carbon_credits" name="carbon_credits" value="{{ $property->carbon_credits }}">
                        @error('carbon_credits') <small class="text-danger">{{ $message }}</small> @enderror
                    </div>

                    <div class="form-group col-md-4">
                        <label for="address">Endereço</label>
                        <input type="text" class="form-control" id="address" name="address" value="{{ $property->address }}">
                        @error('address') <small class="text-danger">{{ $message }}</small> @enderror
                    </div>
                    <div class="form-group col-md-4">
                        <label for="lat">Latitude</label>
                        <input type="text" class="form-control" id="lat" name="lat" value="{{ $property->lat }}">
                        @error('lat') <small class="text-danger">{{ $message }}</small> @enderror
                    </div>
                    <div class="form-group col-md-4">
                        <label for="lng">Longitude</label>
                        <input type="text" class="form-control" id="lng" name="lng" value="{{ $property->lng }}">
                        @error('lng') <small class="text-danger">{{ $message }}</small> @enderror
                    </div>
                </div>

                <div class="form-group">
                    <label for="images">Imagens</label>
                    <input type="file" class="form-control" id="images" name="file_images[]" multiple>
                    <div id="image-preview-container" class="mt-2">
                        @if($property->file_images)
                            @php
                                $fileImages = str_replace(',', ';', $property->file_images);
                                $imagesArray = explode(';', $fileImages);
                            @endphp
                            @foreach($imagesArray as $image)
                                @if(!empty($image))
                                    <img src="{{ asset('storage/' . $image) }}" alt="Imagem" style="width: 100px; margin-right: 10px; border: 1px solid #ccc; padding: 5px;">
                                @endif
                            @endforeach
                        @else
                            <p>Nenhuma imagem disponível.</p>
                        @endif
                    </div>
                    @error('file_images') <small class="text-danger">{{ $message }}</small> @enderror
                </div>
                <input type="hidden" name="deed_number" value="{{ $property->deed_number }}">
                <input type="hidden" name="cib_nirf_number" value="{{ $property->cib_nirf_number  }}">
                <input type="hidden" name="cost" value="{{ $property->cost  }}">
                <input type="hidden" name="status" value="{{ $property->status  }}">

        </div>
            <h6 class="card-header">English</h6>
            <div class="card-body">
                <div class="form-group">
                    <label for="name_en">Property Name</label>
                    <input type="text" name="name_en" id="name_en" class="form-control" value="{{ $property->name_en }}">
                </div>
                <div class="form-group">
                    <label for="description_en">Description</label>
                    <textarea name="description_en" id="description_en" class="form-control" value="{{ $property->description_en }}"></textarea>
                </div>

                <button type="submit" class="btn btn-success">Atualizar</button>
            </form>
            </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        function addImagePreview(inputId, previewContainerId) {
            const input = document.getElementById(inputId);
            const previewContainer = document.getElementById(previewContainerId);

            input.addEventListener('change', function () {
                previewContainer.innerHTML = '';

                const files = input.files;
                for (let i = 0; i < files.length; i++) {
                    const file = files[i];
                    const reader = new FileReader();

                    reader.onload = function (e) {
                        const imgElement = document.createElement('img');
                        imgElement.src = e.target.result;
                        imgElement.style.width = '100px';
                        imgElement.style.marginRight = '10px';
                        imgElement.style.border = '1px solid #ccc';
                        imgElement.style.padding = '5px';
                        previewContainer.appendChild(imgElement);
                    };

                    reader.readAsDataURL(file);
                }
            });
        }

        addImagePreview('images', 'image-preview-container');
    });
</script>


@endsection