@php use Illuminate\Support\Facades\URL; @endphp
@extends('layouts.user.master')
@section('title')
    @lang('translation.create-product')
@endsection
@section('css')
    <link href="{{ URL::asset('build/libs/dropzone/dropzone.css') }}" rel="stylesheet">

    {{--    <!-- new links -->--}}
    <link href="{{ URL::asset('build/libs/multi.js/multi.min.css') }}" rel="stylesheet">
    <link href="{{ URL::asset('build/libs/@tarekraafat/autocomplete.js/css/autoComplete.css') }}" rel="stylesheet">
@endsection
@section('content')
    @component('components.breadcrumb')
        @slot('li_1')
            Ecommerce
        @endslot
        @slot('title')
            Edit property information
        @endslot
    @endcomponent
    <form action="#" autocomplete="off" method="POST"
          class="needs-validation" id="update-property" enctype="multipart/form-data" novalidate>
        @csrf
        @method('PUT')
        <div class="row">
            <div class="col-lg-8">
                <div class="card">
                    <div class="card-body">
                        <div class="mb-3">
                            <div class="mb-3">
                                <label class="form-label" for="product-title-input">Property Title</label>
                                <input type="hidden" class="form-control" id="formAction" name="formAction" value="add">
                                <input type="text" class="form-control d-none" id="product-id-input">
                                <input type="text" class="form-control" id="product-title-input" name="title" placeholder="Enter product title" required>
                                <div class="invalid-feedback">Please Enter a title for the property.</div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <div class="mb-3">
                                <label class="form-label" for="product-title-input">Property Full Address</label>
                                <input type="hidden" class="form-control" id="formAction" name="formAction" value="add">
                                <input type="text" class="form-control d-none" id="product-id-input">
                                <input type="text" class="form-control" id="product-title-input" name="address"
                                       placeholder="Ex. Rruga e Dibrës, Nr. 53 Tiranë, 1001 Albania" required>
                                <div class="invalid-feedback">Please Enter a title for the property.</div>
                            </div>
                        </div>
                        <div>
                            <label>Property Description</label>
                            <div id="ckeditor-classic">
                            </div>
                            <input type="hidden" name="description" id="ckeditor-description">
                        </div>
                    </div>
                </div>
                <!-- end card -->

                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Property Gallery</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-4">
                            <h5 class="fs-14 mb-1">Property Image</h5>
                            <p class="text-muted">Add Product Main Image.</p>
                            <div class="text-center">
                                <div class="position-relative d-inline-block">
                                    <div class="position-absolute top-100 start-100 translate-middle">
                                        <label for="product-image-input" class="mb-0" data-bs-toggle="tooltip"
                                               data-bs-placement="right" title="Select Image">
                                            <div class="avatar-xs">
                                                <div
                                                    class="avatar-title bg-light border rounded-circle text-muted cursor-pointer">
                                                    <i class="ri-image-fill"></i>
                                                </div>
                                            </div>
                                        </label>
                                        <input
                                            class="form-control d-none"
                                            name="image"
                                            id="product-image-input"
                                            type="file"
                                            accept="image/png, image/gif, image/jpeg, image/jpg"
                                        >
                                    </div>

                                    <div class="avatar-lg">
                                        <div class="avatar-title bg-light rounded">
                                            <img id="product-img"
                                                 class="avatar-md h-auto"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div>
                            <h5 class="fs-14 mb-1">Property Gallery Collection</h5>
                            <p class="text-muted">Add Product Gallery Images.</p>

                            <div class="dropzone">
                                <div class="fallback">
                                    <input name="file" type="file" multiple="multiple">
                                </div>
                                <div class="dz-message needsclick">
                                    <div class="mb-3">
                                        <i class="display-4 text-muted ri-upload-cloud-2-fill"></i>
                                    </div>
                                    <h5>Drop files here or click to upload.(You can also add document images)</h5>
                                </div>
                            </div>

                            <ul class="list-unstyled mb-0" id="dropzone-preview">
                                <li class="mt-2" id="dropzone-preview-list">
                                    <!-- This is used as the file preview template -->
                                    <div class="border rounded">
                                        <div class="d-flex p-2">
                                            <div class="flex-shrink-0 me-3">
                                                <div class="avatar-sm bg-light rounded">
                                                    <img data-dz-thumbnail class="img-fluid rounded d-block" src=""
                                                         alt="Product-Image"/>
                                                </div>
                                            </div>
                                            <div class="flex-grow-1">
                                                <div class="pt-1">
                                                    <h5 class="fs-14 mb-1" data-dz-name>&nbsp;</h5>
                                                    <p class="fs-13 text-muted mb-0" data-dz-size></p>
                                                    <strong class="error text-danger" data-dz-errormessage></strong>
                                                </div>
                                            </div>
                                            <div class="flex-shrink-0 ms-3">
                                                <button data-dz-remove class="btn btn-sm btn-danger">Delete</button>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                            <!-- end dropzone-preview -->
                        </div>
                    </div>
                </div>
                <!-- end card -->
                <div class="text-end mb-3">
                    <button type="submit" class="btn btn-success w-sm" id="form-property">Update property</button>
                </div>
            </div>
            <!-- end col -->

            <div class="col-lg-4">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Publish</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label for="choices-publish-status-input" class="form-label">Property Status</label>

                            <select class="form-select" id="choices-publish-status-input" data-choices
                                    data-choices-search-false name="property-status">
                                    <option value="" selected></option>
                            </select>
                        </div>

                        <div class="mb-3">
                            <label for="choices-publish-status-input" class="form-label">Property Layout</label>

                            <select class="form-select" id="choices-publish-status-input" data-choices
                                    data-choices-search-false name="property-layout">
                                <option  selected></option>
                            </select>
                        </div>

                        <div>
                            <label for="choices-publish-visibility-input" class="form-label">Property type</label>
                            <select class="form-select" id="" data-choices
                                    data-choices-search-false name="property-type">
                                    <option selected>
                                    </option>
                            </select>
                        </div>
                    </div>
                    <!-- end card body -->
                </div>
                <!-- end card -->

                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Price</h5>
                    </div>
                    <!-- end card body -->
                    <div class="card-body">
                        <div>
                                <label for="property-sale-price" class="form-label">Property price for sale</label>
                                <input type="number" id="property-sale-price"
                                       class="form-control mb-2"
                                       placeholder="Ex. 1200000" name="property-price">

                                <label for="datepicker-publish-input" class="form-label">Property price per
                                    month</label>
                                <input type="number" id="datepicker-publish-input"
                                        class="form-control"
                                       placeholder="Ex. 45000" name="property-price-month">
                                <label for="property-sale-price" class="form-label">Property price for sale</label>
                                <input type="number" id="property-sale-price"
                                       class="form-control mb-2"
                                       placeholder="Ex. 1200000" name="property-price">

                                <label for="datepicker-publish-input" class="form-label">Property price per
                                    month</label>
                                <input type="number" id="datepicker-publish-input"
                                        class="form-control"
                                       placeholder="Ex. 45000" name="property-price-month">
                        </div>
                    </div>
                </div>
                <!-- end card -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Area</h5>
                    </div>
                    <!-- end card body -->
                    <div class="card-body">
                        <div>
                            <label for="property-area-residential" class="form-label">Property Residential Unit
                                (m<sup>2</sup>) </label>
                            <input type="number" id="property-area-residential" class="form-control mb-2"
                                   placeholder="Ex. 129" name="residential-unit">

                            <label for="property-area-space" class="form-label">Property Outdoor Space
                                (m<sup>2</sup>)</label>
                            <input type="number" id="property-area-space"
                                   class="form-control"
                                   placeholder="Ex. 800" name="residential-space">
                        </div>
                    </div>
                </div>
                <!-- end card -->

                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Property Categories</h5>
                    </div>
                    <div class="card-body">
                        <select class="form-select" id="" name="property-category"
                                data-choices data-choices-search-false>
                                <option>
                                </option>
                        </select>
                    </div>
                    <!-- end card body -->
                </div>
                <!-- end card -->

                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Documents</h5>
                    </div>
                    <div class="card-body">
                        <label for="choices-category-input" class="form-label">Does the property has documents ?</label>
                        <select class="form-select" id="" name="property-document-status">
                                <option></option>
                        </select>
                    </div>
                    <!-- end card body -->
                </div>
                <!-- end card -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Location</h5>
                    </div>

                    <div class="card-body">
                        <div class="hstack gap-3 align-items-start">

                            <div class="flex-grow-1">
                                <label for="autoCompleteCity" class="text-muted">Search City Names</label>
                                <input id="autoCompleteCity" type="text" dir="ltr" spellcheck=false autocomplete="off"

                                       autocapitalize="off" name="property-city">
                            </div>
                        </div>
                    </div>
                    <!-- end card body -->
                </div>
                <!-- end card -->

                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Year of build</h5>
                    </div>
                    <div class="card-body">
                        <p class="text-muted mb-2">Enter the year the property was build</p>
                        <input class="form-control" placeholder="Ex. 2009"
                               name="property-year-build"></input>
                        <!-- should be a number && should add name to it  -->
                    </div>
                    <!-- end card body -->
                </div>
                <!-- end card -->
            </div>
        </div>
        <!-- end row -->

        <!-- This is the hidden input that will store the uploaded files gallery images-->
        <input type="hidden" name="uploaded_files" value="[]">
        <!-- This is the hidden input that will detect changes on main-image and change them accordingly here-->
{{--        <input type="hidden" id="main-image-path" name="main-image-path" value="{{ URL::asset($mainImagePath) }}">--}}
    </form>
@endsection
@section('script')
    <script>
        let saveImage = ('{{ URL::asset('images/DBImages/seller/property') }}');
        {{--let categoryArray = @json($propertyCities); // this is the array of categories and will be sent to filterCities.js--}}
        {{--let existingImages = @json($propertyImagesPaths); // Display the old images in the dropzone--}}
    </script>
    {{-- JS libraries --}}
    <script src="{{ URL::asset('build/libs/@tarekraafat/autocomplete.js/autoComplete.min.js') }}"></script>
    <script src="{{ URL::asset('build/libs/@ckeditor/ckeditor5-build-classic/build/ckeditor.js') }}"></script>
    <script src="{{ URL::asset('build/libs/dropzone/dropzone-min.js') }}"></script>

    {{-- Custom JS files --}}
    <script src="{{ URL::asset('build/js/custom/filterCities.js') }}"></script>
    <script src="{{ URL::asset('build/js/custom/dropzone.js') }}"></script>
    <script src="{{ URL::asset('build/js/custom/ck-editor.js') }}"></script>
    <script src="{{ URL::asset('build/js/custom/save-image.js') }}"></script>

    <script src="{{ URL::asset('build/js/app.js') }}"></script>
@endsection