@extends('admin.layout.master')

@section('title')
    Add Properties
@endsection

@section('content')

    <div class="page-content">

        <nav class="page-breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('admin./') }}">Home</a></li>
                <li class="breadcrumb-item active" aria-current="page">Add Properties</li>
            </ol>
        </nav>

        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <h6 class="card-title">Add Properties</h6>
                        <form method="POST" action="{{ route('admin.save_properties') }}" enctype="multipart/form-data"
                              class="MyForm">
                            @csrf
                            <div class="row">
                                <div class="col-md-4">
                                    <label>Name <span style="color:red">*</span></label>
                                    <input type="text" class="form-control mb-3 MyInput" autocomplete="off"
                                           placeholder="Name" name="name" required value="{{ old('name') }}">
                                </div>
                                <div class="col-md-4">
                                    <label>Type <span style="color:red">*</span></label>
                                    <select name="type" class="form-control mb-3 MyInput" required>
                                        <option value="" selected disabled>Select Type</option>
                                        <option value="HMO">HMO</option>
                                        <option value="SA">SA</option>
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label>Main Image <span style="color:red">*</span></label>
                                    <input type="file" class="form-control mb-3 MyInput pt-3" autocomplete="off"
                                           required
                                           name="main_image" accept="image/*">
                                </div>
                                <div class="col-md-4">
                                    <label>Property Reference Number <span style="color:red">*</span></label>
                                    <input type="text" class="form-control mb-3 MyInput" autocomplete="off"
                                           placeholder="Property Reference Number " name="reference_number"
                                           value="{{ old('reference_area') }}">
                                </div>
                                <div class="col-md-4">
                                    <label>Available From Date <span style="color:red">*</span></label>
                                    <input type="date" class="form-control mb-3 MyInput" autocomplete="off"
                                           placeholder="Available From Date" name="available_date"
                                           value="{{ old('available_date') }}">
                                </div>
                                <div class="col-md-4">
                                    <label>Rent <span style="color:red">*</span></label>
                                    <input type="number" min="1" class="form-control mb-3 MyInput" autocomplete="off"
                                           placeholder="Rent" name="rent" value="{{ old('rent') }}">
                                </div>
                                <div class="col-md-2">
                                    <label>Sourcing Fee <span style="color:red">*</span></label>
                                    <input type="number" min="1" class="form-control mb-3 MyInput" autocomplete="off"
                                           placeholder="Sourcing Fee" name="sourcing_fee"
                                           value="{{ old('sourcing_fee') }}">
                                </div>
                                <div class="col-md-4">
                                    <label>Location <span style="color:red">*</span> </label>
                                    <input type="text" class="form-control mb-3 MyInput" id="location"
                                           autocomplete="off"
                                           placeholder="Location" name="location" value="{{ old('location') }}">
                                </div>
                                <div class="col-md-3">
                                    <label>Property Type <span style="color:red">*</span></label>
                                    <select name="property_type" class="form-control mb-3 MyInput" required>
                                        <option value="" selected disabled>Select Type</option>
                                        <option value="Available">Available</option>
                                        <option value="Rented">Rented</option>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label>Status <span style="color:red">*</span></label>
                                    <select name="status" class="form-control mb-3 MyInput" required>
                                        <option value="" selected disabled>Select Status</option>
                                        <option value="active">Active</option>
                                        <option value="inactive">Inactive</option>
                                    </select>
                                </div>
                                <div class="col-md-12">
                                    <label>Monthly Occupancy Rate</label>
                                    <input type="number" min="1" class="form-control mb-3 MyInput" autocomplete="off"
                                           placeholder="Monthly Occupancy Rate" name="monthly_occupancy_rate"
                                           value="{{ old('monthly_occupancy_rate') }}">
                                </div>
                                <div class="col-md-12">
                                    <label>Short Description <span style="color:red">*</span></label>
                                    <textarea name="short_description" required class="form-control mb-3"
                                              placeholder="Short Description" rows="5"></textarea>
                                </div>
                                <div class="col-md-12">
                                    <label>Overview</label>
                                    <textarea name="overview" id="description" class="form-control mb-3"
                                              rows="5"></textarea>
                                </div>
                                <div class="col-md-4">
                                    <label>Area</label>
                                    <input type="text" class="form-control mb-3 MyInput" autocomplete="off"
                                           placeholder="Area" name="area" value="{{ old('area') }}">
                                </div>
                                <div class="col-md-4">
                                    <label>Floors</label>
                                    <input type="text" class="form-control mb-3 MyInput" autocomplete="off"
                                           placeholder="Floors" name="floors" value="{{ old('floors') }}">
                                </div>
                                <div class="col-md-4">
                                    <label>Bedrooms</label>
                                    <input type="text" class="form-control mb-3 MyInput" autocomplete="off"
                                           placeholder="Bedrooms" name="bedrooms" value="{{ old('bedrooms') }}">
                                </div>
                                <div class="col-md-4">
                                    <label>Bathrooms</label>
                                    <input type="text" class="form-control mb-3 MyInput" autocomplete="off"
                                           placeholder="Bathrooms" name="bathrooms" value="{{ old('bathrooms') }}">
                                </div>
                                <div class="col-md-4">
                                    <label>Terrace</label>
                                    <input type="text" class="form-control mb-3 MyInput" autocomplete="off"
                                           placeholder="Terrace" name="terrace" value="{{ old('terrace') }}">
                                </div>
                                <div class="col-md-4">
                                    <label>Parking</label>
                                    <input type="text" class="form-control mb-3 MyInput" autocomplete="off"
                                           placeholder="Parking" name="parking" value="{{ old('parking') }}">
                                </div>
                                <div class="col-md-12 mb-4">
                                    <h4><b>Estimated Profit Pie Chart Data:</b></h4>
                                </div>
                                <div class="col-md-6">
                                    <label>Average Monthly Revenue </label>
                                    <input type="number" min="1" class="form-control mb-3 MyInput" autocomplete="off"
                                           placeholder="Average Monthly Revenue" name="average_monthly_revenue" value="{{ old('average_monthly_revenue') }}">
                                </div>
                                <div class="col-md-6">
                                    <label>Estimated Monthly Cleaning Cost</label>
                                    <input type="number" min="1" class="form-control mb-3 MyInput" autocomplete="off"
                                           placeholder="Estimated Monthly Cleaning Cost" name="estimated_monthly_cleaning_cost" value="{{ old('estimated_monthly_cleaning_cost') }}">
                                </div>
                                <div class="col-md-6">
                                    <label>Estimated Monthly Utility & Council Tax</label>
                                    <input type="number" min="1" class="form-control mb-3 MyInput" autocomplete="off"
                                           placeholder="Estimated Monthly Utility & Council Tax" name="utility_council_tax" value="{{ old('utility_council_tax') }}">
                                </div>
                                <div class="col-md-6">
                                    <label>Fixed Rent</label>
                                    <input type="number" min="1" class="form-control mb-3 MyInput" autocomplete="off"
                                           placeholder="Fixed Rent" name="fixed_rent" value="{{ old('fixed_rent') }}">
                                </div>
                                <div class="col-md-6">
                                    <label>Estimated Profit</label>
                                    <input type="number" min="1" class="form-control mb-3 MyInput" autocomplete="off" required
                                           placeholder="Estimated Profit" name="estimated_profit" value="{{ old('estimated_profit') }}">
                                </div>

                            </div>


                            <div class="row">

                                <div class="col-md-4 mx-auto mt-3" style="text-align:center">

                                    <button type="submit" class="btn btn-outline-success MyButton"
                                            name="UpdateSystemInformation">Submit
                                    </button>

                                </div>

                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('script')

    <script
        src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=AIzaSyABXn0Dg5Bkbn8UnQFbMaaqbAQBMAsivEc&libraries=places"></script>
    <script src="https://cdn.tiny.cloud/1/imzoehkh8cvp4e3gi9mtipzudy44lw3hprt53vujzal7rsfi/tinymce/6/tinymce.min.js"
            referrerpolicy="origin"></script>

    <script>
        google.maps.event.addDomListener(window, 'load', initialize);

        function initialize() {
            var input = document.getElementById('location');
            var autocomplete = new google.maps.places.Autocomplete(input);
            autocomplete.addListener('place_changed', function () {
                var place = autocomplete.getPlace();
            });
        }

        var useDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
        tinymce.init({
            selector: 'textarea#description',
            plugins: 'print preview paste importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists wordcount imagetools textpattern noneditable help charmap quickbars emoticons',
            imagetools_cors_hosts: ['picsum.photos'],
            menubar: 'file edit view insert format tools table help',
            toolbar: 'undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist | forecolor backcolor removeformat | pagebreak | charmap emoticons | fullscreen  preview save print | insertfile image media template link anchor codesample | ltr rtl',
            toolbar_sticky: true,
            autosave_ask_before_unload: true,
            autosave_interval: '30s',
            autosave_prefix: '{path}{query}-{id}-',
            autosave_restore_when_empty: false,
            autosave_retention: '2m',
            image_advtab: true,
            link_list: [
                {title: 'My page 1', value: 'https://www.tiny.cloud'},
                {title: 'My page 2', value: 'http://www.moxiecode.com'}
            ],
            image_list: [
                {title: 'My page 1', value: 'https://www.tiny.cloud'},
                {title: 'My page 2', value: 'http://www.moxiecode.com'}
            ],
            image_class_list: [
                {title: 'None', value: ''},
                {title: 'Some class', value: 'class-name'}
            ],
            importcss_append: true,
            file_picker_callback: function (callback, value, meta) {
                /* Provide file and text for the link dialog */
                if (meta.filetype === 'file') {
                    callback('https://www.google.com/logos/google.jpg', {text: 'My text'});
                }

                /* Provide image and alt text for the image dialog */
                if (meta.filetype === 'image') {
                    callback('https://www.google.com/logos/google.jpg', {alt: 'My alt text'});
                }

                /* Provide alternative source and posted for the media dialog */
                if (meta.filetype === 'media') {
                    callback('movie.mp4', {
                        source2: 'alt.ogg',
                        poster: 'https://www.google.com/logos/google.jpg'
                    });
                }
            },
            templates: [
                {
                    title: 'New Table',
                    description: 'creates a new table',
                    content: '<div class="mceTmpl"><table width="98%%"  border="0" cellspacing="0" cellpadding="0"><tr><th scope="col"> </th><th scope="col"> </th></tr><tr><td> </td><td> </td></tr></table></div>'
                },
                {
                    title: 'Starting my story',
                    description: 'A cure for writers block',
                    content: 'Once upon a time...'
                },
                {
                    title: 'New list with dates',
                    description: 'New List with dates',
                    content: '<div class="mceTmpl"><span class="cdate">cdate</span><br /><span class="mdate">mdate</span><h2>My List</h2><ul><li></li><li></li></ul></div>'
                }
            ],
            template_cdate_format: '[Date Created (CDATE): %m/%d/%Y : %H:%M:%S]',
            template_mdate_format: '[Date Modified (MDATE): %m/%d/%Y : %H:%M:%S]',
            height: 600,
            image_caption: true,
            quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
            noneditable_noneditable_class: 'mceNonEditable',
            toolbar_mode: 'sliding',
            // contextmenu: 'link image imagetools table',
            // skin: useDarkMode ? 'oxide-dark' : 'oxide',
            // content_css: useDarkMode ? 'dark' : 'default',
            content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
        });

    </script>

@endsection