@extends('admin.layout.master')

@section('title')
    Add Package
@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 Package</li>
            </ol>
        </nav>

        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <h6 class="card-title">Add Package</h6>
                        <form method="POST" action="{{ route('admin.save_mine_packages') }}" enctype="multipart/form-data" class="MyForm">
                            @csrf
                            <input type="hidden" name="package_id" value="{{ $package->id }}">
                            <div class="row">
                                <div class="col-md-4">
                                    <label>Package Title</label>
                                    <input type="text" class="form-control mb-3 MyInput" autocomplete="off"
                                           placeholder="Region Title"
                                           value="{{ ($package->name) ? $package->name : '' }}" readonly disabled>
                                </div>
                                <div class="col-md-4">
                                    <label>Original Price</label>
                                    <input type="text" class="form-control mb-3 MyInput" autocomplete="off"
                                           placeholder="Original Price"
                                           value="{{ ($package->price) ? "$".$package->price : '' }}" readonly disabled>
                                </div>
                                <div class="col-md-4">
                                    <label>Duration</label>
                                    <input type="text" class="form-control mb-3 MyInput" autocomplete="off"
                                           placeholder="Duration"
                                           value="{{ ($package->duration) ? $package->duration. " Days" : '' }}"
                                           readonly disabled>
                                </div>
                                <div class="col-md-6">
                                    <label>Package Name <span style="color: red">*</span> </label>
                                    <input type="text" class="form-control mb-3 MyInput"
                                           autocomplete="off" name="title"
                                           placeholder="Package Name" required>
                                </div>
                                <div class="col-md-6">
                                    <label>Package Price <span style="color: red">*</span></label>
                                    <input type="number" step="0.01" class="form-control mb-3 MyInput"
                                           autocomplete="off" name="price"
                                           placeholder="My Price" required>
                                </div>
                                <div class="col-md-12">
                                    <label>Description</label>
                                        <textarea name="description" class="form-control mb-3" id="description"></textarea>
                                </div>
                                <div class="col-md-12">
                                    <label>Type <span style="color: red">*</span></label>
                                    <select name="type" onchange="SelectType(this.value)"
                                            class="form-control mb-3 MyInput" required>
                                        <option value="" selected disabled>Select Type</option>
                                        <option value="1">Locally</option>
                                        <option value="2">Regionally</option>
                                    </select>
                                </div>

                                <div class="row" id="append"></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">Save Record
                                    </button>

                                </div>

                            </div>

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

@endsection

@section('script')

    <script>

        var countries = `
        <div class="col-md-12 mb-4">
                                    <h3><b>Countries</b></h3>
                                </div>
                                @forelse($countries as $country)
        <div class="col-md-3 mb-2">
            <input type="checkbox" value="{{ $country->id }}" name="country_region_id[]"
                                               id="c{{ $country->id }}">
                                        <label for="c{{ $country->id }}">{{ $country->name }}</label>
                                    </div>
                                @empty
        @endforelse
        `;

        var regions = `
        <div class="col-md-12 mb-4">
                                    <h3><b>Regions</b></h3>
                                </div>
                                @forelse($regions as $region)
        <div class="col-md-3 mb-2">
            <input type="radio" value="{{ $region->id }}" name="country_region_id[]"
                                               id="r{{ $region->id }}">
                                        <label for="r{{ $region->id }}">{{ $region->name }}</label>
                                    </div>
                                @empty
        @endforelse
        `;

        function SelectType(id) {
            $("#append").empty();
            if (id == 1) {
                $("#append").html(countries);
            }
            if (id == 2) {
                $("#append").html(regions);
            }
        }

        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