@extends('layout')

@inject('carbon', 'Carbon\Carbon')

@section('content')
    <!-- Page header -->
    <div class=" page-header-light" style="border-radius: 0px;">
        <div class="d-flex justify-content-between align-items-center mx-3 my-2">
            <div class="d-flex flex-column tailwind-scope">
                <h4 class="text-white text-2xl font-bold">Propriétés & Maintenance</h4>
                <p class="text-white text-sm">Gestion des logements</p>
            </div>
            @include('shared.navbar')
        </div>
    </div>

    <div class="page-content">
        <div class="content">
            <form class="wizard-form steps-validation tailwind-scope" action="{{ route('property.store') }}" method="post"
                enctype="multipart/form-data" data-fouc id="create-propertie-form">
                {{ csrf_field() }}

                <h6>INFORMATIONS DE BASE</h6>
                <fieldset class="">
                    <x-form-group label="Type de propriété:">
                        <select name="property_type_id" data-placeholder="Type de propriété"
                            class="form-control w-1/2 custom-input form-control-select">
                            <option value="1">Appartement</option>
                            <option value="2">Hotel</option>
                            <option value="3">Villa</option>
                        </select>
                    </x-form-group>

                    <x-form-group label="C'est à l'étage :">
                        <select class="form-control w-1/2 custom-input form-control-select" name="floor">
                            <option value="1">Sous-sol</option>
                            <option value="2">sol</option>
                            <option value="3">1</option>
                            <option value="4">2</option>
                            <option value="5">3</option>
                            <option value="6">4</option>
                        </select>
                    </x-form-group>


                    <x-form-group label="Description:">
                        <textarea name="descriptions" rows="4" cols="4"
                            placeholder="Compositions: 1 Living room, 2x Bedroom, 1 Kitchen, 2x Bathroom"
                            class="form-control w-1/2 custom-input"></textarea>
                    </x-form-group>
                    <x-form-group label="Propriétaire :" required='true'>
                        <div class="w-1/2">

                            <select class="form-control custom-input form-control-select" name="tll_owner_id" required>
                                <option value="" selected>-- Sélectionner un propriétaire --</option>
                                @foreach($owner as $o)
                                    <option value="{{ $o->id }}">{{ $o->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </x-form-group>

                    <x-form-group label="Commission TLL (%):">
                        <input type="text" pattern="[0-9]+(\.[0-9]+)?" name="commission_tll"
                            class="form-control custom-input w-1/2" placeholder="Commission TLL (%)">
                    </x-form-group>
                    <x-form-group label="Frais de menage:">
                        <input type="text" pattern="[0-9]+(\.[0-9]+)?" name="cleaning_price"
                            class="form-control custom-input w-1/2" placeholder="Frais de menage">
                    </x-form-group>
                    <x-form-group label="Url dans site Property:">
                        <input type="text" name="property_url" class="form-control custom-input w-1/2"
                            placeholder="Url dans site Property">
                    </x-form-group>
                    <x-form-group label="Nom de la propriété:" required='true'>
                        <div class="w-1/2">
                            <input type="text" name="name" class="form-control required custom-input " required
                                placeholder="Nom de la propriété">
                        </div>
                    </x-form-group>
                    <x-form-group label="Nombre des gens:" required='true'>
                        <div class="w-1/2">
                            <input type="number" name="standard_guests" value="" required
                                class="form-control  custom-input">
                        </div>
                    </x-form-group>

                    <x-form-group label="Photos:">

                        <div class="col-lg-10">
                            <input type="file" name="images[]" class="file-input-ajax custom-input" multiple="multiple"
                                data-fouc>
                            <span class="form-text text-xs text-muted"><strong>
                                    notes:
                                </strong>
                                Choisissez d'ajouter des photos individuellement ou
                                en bloc, Réorganiser en faisant glisser, La taille de la photo ne peut pas dépasser
                                2 Mo. Pour chaque téléchargement groupé, la taille totale ne peut pas dépasser 10
                                Mo.</span>
                        </div>

                    </x-form-group>

                    <x-form-group label="Emplacement:" required='true'>
                        <div class="flex flex-col w-1/2 gap-2">

                            <input type="text" name="street" class="form-control custom-input"
                                placeholder="Street name and number" required>

                            {{-- <input type="text" name="city" class="form-control custom-input" placeholder="Ville"> --}}

                            <input type="text" name="zip_code" class="form-control custom-input" placeholder="Zipcode">

                        </div>
                    </x-form-group>


                    <x-form-group label="Synchronisé avec rental united :">
                        <select class="form-control custom-input w-1/2 form-control-select" name="is_active">
                            <option value="1">Oui</option>
                            <option value="0">Non</option>
                        </select>
                    </x-form-group>

                    {{-- <div class="row">
                        <div class="col-md-12">
                            <div class="map-container" id="map_marker_simple"></div>
                        </div>
                    </div> --}}
                    {{-- <div class="row"><br></div> --}}
                    <x-form-group label="La taille totale (m²):">
                        <input type="text" name="latitude" class="form-control custom-input w-1/2"
                            placeholder="La taille totale (m²)">
                    </x-form-group>
                    <x-form-group label="La taille totale (sqf):">

                        <input type="text" name="longitude" class="form-control custom-input w-1/2"
                            placeholder="La taille totale (sqf)">
                    </x-form-group>
                </fieldset>

                <h6>COMMODITÉS</h6>
                <fieldset>

                    <x-form-group label="Nombre de chambres lit simple:">
                        <input type="number" name="bed_simple_number" value="" class="form-control custom-input w-1/2">
                    </x-form-group>

                    <x-form-group label="Nombre de chambres lit double:">
                        <input type="number" name="bed_double_number" value="" class="form-control custom-input w-1/2">
                    </x-form-group>
                    <x-form-group label="Nombre de salles de bain:">
                        <input type="number" name="sdb_number" value="" class="form-control custom-input w-1/2">
                    </x-form-group>


                </fieldset>

                <h6>PRIX & DISPONIBILITÉ</h6>
                <fieldset>

                    <x-form-group label="Ajouter/Modifier la saison:">
                        <ul id="fieldList" class="w-1/2 space-y-1" style="max-width: 943px;">
                            <li>
                                <input name="season_seasonName[]" class="form-control custom-input" type="text"
                                    placeholder="Nom de la saison" />
                            </li>
                            <li>
                                <input name="season_date_from[]" class="form-control custom-input" type="text"
                                    placeholder="Date de" />
                            </li>
                            <li>
                                <input name="season_date_to[]" class="form-control custom-input" type="text"
                                    placeholder="Date à">
                            </li>
                            <li>
                                <input name="season_daily_price[]" class="form-control custom-input" type="text"
                                    placeholder="Prix journalier">
                            </li>
                            <li>
                                <input name="season_extra_price[]" class="form-control custom-input" type="text"
                                    placeholder="Prix invité supplémentaire">
                            </li>
                        </ul>
                    </x-form-group>


                </fieldset>
                <div class="w-full flex">
                    <button type="submit" id="submitBox" class="w-full bg-[#1F9878] font-bold py-2 text-white m-3">
                        Sauvegarder
                    </button>
                </div>
            </form>
        </div>
    </div>

    <script src="{{ asset('backAssets/global_assets/js/plugins/forms/inputs/touchspin.min.js') }}"></script>
    <script src="{{ asset('backAssets/global_assets/js/plugins/uploaders/fileinput/plugins/purify.min.js') }}"></script>
    <script src="{{ asset('backAssets/global_assets/js/plugins/uploaders/fileinput/plugins/sortable.min.js') }}"></script>
    <script src="{{ asset('backAssets/global_assets/js/plugins/uploaders/fileinput/fileinput.min.js') }}"></script>
    <script src="{{ asset('backAssets/global_assets/js/demo_pages/form_input_groups.js') }}"></script>
    <script src="{{ asset('backAssets/global_assets/js/demo_pages/uploader_bootstrap.js') }}"></script>
    <script src="{{ asset('backAssets/global_assets/js/plugins/forms/wizards/steps.min.js') }}"></script>
    <script src="{{ asset('backAssets/global_assets/js/plugins/forms/selects/select2.min.js') }}"></script>
    <script src="{{ asset('backAssets/global_assets/js/plugins/forms/styling/uniform.min.js') }}"></script>
    <script src="{{ asset('backAssets/global_assets/js/plugins/forms/inputs/inputmask.js') }}"></script>
    <script src="{{ asset('backAssets/global_assets/js/plugins/forms/validation/validate.min.js') }}"></script>
    <script src="{{ asset('backAssets/global_assets/js/plugins/extensions/cookie.js') }}"></script>
    <script src="{{ asset('backAssets/global_assets/js/demo_pages/form_wizard.js') }}"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDpNamTwPhnNToA5n-ULcuc5JjHru7s7Yc"></script>
    <script>
        $(document).on('submit', '#create-propertie-form', function () {
            const button = $('#submitBox');
            button.prop('disabled', true).addClass('opacity-50').text('Traitement en cours...');
        });
        $(function () {
            $("#addMore").click(function (e) {
                e.preventDefault();
                $("#fieldList").append("<li>&nbsp;</li>");
                $("#fieldList").append("<li><input type='text' class='form-control ' name='seasonName[]' placeholder='Nom de la saison' /></li>");
                $("#fieldList").append("<li><input type='text' class='form-control ' name='phone[]' placeholder='Date de' /></li>");
                $("#fieldList").append("<li><input type='text' class='form-control ' name='email[]' placeholder='Date à' /></li>");
                $("#fieldList").append("<li><input type='text' class='form-control ' name='dayly[]' placeholder='Prix journalier' /></li>");
                $("#fieldList").append("<li><input type='text' class='form-control ' name='extra[]' placeholder='Prix invité supplémentaire' /></li>");
            });
        });
        $(function () {
            $("#addMore2").click(function (e) {
                e.preventDefault();
                $("#fieldList2").append("<li>&nbsp;</li>");
                $("#fieldList2").append("<li><input type='text' class='form-control ' name='seasonName[]' placeholder='Kind' /></li>");
                $("#fieldList2").append("<li><input type='text' class='form-control ' name='phone[]' placeholder='Calculation type' /></li>");
                $("#fieldList2").append("<li><input type='text' class='form-control ' name='email[]' placeholder='Value' /></li>");
                $("#fieldList2").append("<li><input type='text' class='form-control ' name='dayly[]' placeholder='Collection time' /></li>");
                $("#fieldList2").append("<li><input type='text' class='form-control ' name='extra[]' placeholder='Optional' /></li>");
            });
        });
        $(function () {
            $("#addMore3").click(function (e) {
                e.preventDefault();
                $("#fieldList3").append("<li>&nbsp;</li>");
                $("#fieldList3").append("<li><input type='text' class='form-control ' name='seasonName[]' placeholder='From' /></li>");
                $("#fieldList3").append("<li><input type='text' class='form-control ' name='phone[]' placeholder='To' /></li>");
                $("#fieldList3").append("<li><input type='text' class='form-control ' name='email[]' placeholder='Charge (%)' /></li>");
            });
        });
    </script>
@endsection