@extends('layouts.admin')

@section('content')

<div class="container mt-5">
    <div class="card">
        <div class="card-header">
            <h2>Cadastro 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.store')}}" enctype="multipart/form-data">
                @csrf
                <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->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="{{ old('name') }}"></input>
                    @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">{{ old('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->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="{{ old('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="{{ old('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="{{ old('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="{{ old('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="{{ old('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 mb-3" id="images" name="file_images[]" multiple>
                    @error('file_images') <small class="text-danger">{{ $message }}</small> @enderror
                    <div id="image-preview-container"></div>
                </div>
                <input type="hidden" name="deed_number" value="0">
                <input type="hidden" name="cib_nirf_number" value="0">
                <input type="hidden" name="cost" value="0">
                <input type="hidden" name="status" value="catalog_analysis">
        </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="{{ old('company_name_en') }}">
                    </div>
                    <div class="form-group">
                        <label for="description_en">Description</label>
                        <textarea name="description_en" id="description_en" class="form-control">{{ old('description_en') }}</textarea>
                    </div>
                    <button type="submit" class="btn btn-primary">Salvar</button>
                </div>
            </form>
    </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';
                        previewContainer.appendChild(imgElement);
                    };

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

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

@endsection