@php
    $edit = !is_null($dataTypeContent->getKey());
    $add  = is_null($dataTypeContent->getKey());

    $countries = \App\Models\Country::all();
    $cities = \App\Models\City::all();
    $languages = \App\Models\Language::all();
@endphp

@extends('voyager::master')

@section('css')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="{{voyager_asset('style/rte_theme_default.css')}}"/>

@stop

@section('page_title', __('voyager::generic.'.($edit ? 'edit' : 'add')).' '.$dataType->display_name_singular)

@section('page_header')
    @include('voyager::multilingual.language-selector')
@endsection

@section('content')

    <div class="row">
        <div class="padding-item col-lg-12 col-md-12 col-sm-12">
            <nav class="navigation">
                <div class="right-top-nav flex-box">
                    <a class="flex-box back" href="{{ url()->previous() }}">
                        <img src="{{voyager_asset('icon/back.svg')}}">
                        {{ __('voyager::generic.return_to_list') }}
                    </a>
                </div>
            </nav>
        </div>
        <div class="col-lg-12 col-md-12 col-sm-12">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12">
                    <div class="row">
                        <div class="padding-item col-lg-12 col-md-12 col-sm-12">
                            <div class="box">
                                <!-- form start -->
                                <form class="form inputs-form" action="{{ route('store_segment') }}" method="POST">
                                    <div class="row">

                                        @csrf
                                        <!-- PUT Method if we are editing -->

                                        <div class="margin-bottom padding-item col-lg-12 col-md-12 col-sm-12">
                                            <div class=" input-row">
                                                <label>
                                                    Name
                                                </label>
                                                <input type="text" placeholder="segment name" name="name" required>
                                            </div>
                                        </div>

                                        <div class="col-md-12 col-12 col-xs-12" style="flex: 1">
                                            <div style="background-color: unset; padding: 0 10px; "
                                                 class=" input-row form-group gray select">
                                                <label class="control-label">
                                                    Country
                                                </label>
                                                <div class="dropdown custom-selects newCustomSelectBox showSelect2">
                                                    <select class="select2-hidden-accessible" name="country[]" multiple>
{{--                                                        <option value="0">select</option>--}}
                                                        @foreach($countries as $country)
                                                            <option
                                                                value="{{ $country->id }}">{{ $country->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-md-12 col-12 col-xs-12" style="flex: 1">
                                            <div style="background-color: unset; padding: 0 10px; "
                                                 class=" input-row form-group gray select">
                                                <label class="control-label">
                                                    language
                                                </label>
                                                <div class="dropdown custom-selects newCustomSelectBox showSelect2">
{{--                                                    custom-selects--}}

                                                    <select class="select2-hidden-accessible" name="language[]" multiple>
{{--                                                        <option value="0">select</option>--}}
                                                        @foreach($languages as $language)
                                                            <option value="{{ $language->id }}">
                                                                {{ $language->name }}
                                                            </option>
                                                        @endforeach
                                                    </select>


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

                                        <div style="margin-top: 20px">
                                            birthdate
                                        </div>


                                        <div class="col-md-12 col-12 col-xs-12" style="flex: 1">
                                            <div style="background-color: unset; padding: 0 10px; "
                                                 class=" input-row form-group gray">
                                                <label class="control-label" for="">
                                                    From
                                                </label>
                                                <div>
                                                    <input type="date" class="form-control datePickerInput"
                                                           name="birth_from" placeholder="Start Date" value="">
                                                    <img class="black-calender"
                                                         src="{{voyager_asset('icon/black-calender.svg')}}">
                                                    <img class="delet-value"
                                                         src="{{voyager_asset('icon/delet-value.svg')}}">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-12 col-12 col-xs-12" style="flex: 1">
                                            <div style="background-color: unset; padding: 0 10px; "
                                                 class=" input-row form-group gray">
                                                <label class="control-label" for="start_date">
                                                    TO
                                                </label>
                                                <div>
                                                    <input type="date" class="form-control datePickerInput"
                                                           name="birth_to" placeholder="Start Date" value="">
                                                    <img class="black-calender"
                                                         src="{{voyager_asset('icon/black-calender.svg')}}">
                                                    <img class="delet-value"
                                                         src="{{voyager_asset('icon/delet-value.svg')}}">
                                                </div>
                                            </div>
                                        </div>


                                        <div style="margin-top: 20px">
                                            register date
                                        </div>


                                        <div class="col-md-12 col-12 col-xs-12" style="flex: 1">
                                            <div style="background-color: unset; padding: 0 10px; "
                                                 class=" input-row form-group gray">
                                                <label class="control-label" for="">
                                                    From
                                                </label>
                                                <div>
                                                    <input type="date" class="form-control datePickerInput"
                                                           name="register_from" placeholder="Start Date" value="">
                                                    <img class="black-calender"
                                                         src="{{voyager_asset('icon/black-calender.svg')}}">
                                                    <img class="delet-value"
                                                         src="{{voyager_asset('icon/delet-value.svg')}}">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-12 col-12 col-xs-12" style="flex: 1">
                                            <div style="background-color: unset; padding: 0 10px; "
                                                 class=" input-row form-group gray">
                                                <label class="control-label" for="start_date">
                                                    TO
                                                </label>
                                                <div>
                                                    <input type="date" class="form-control datePickerInput"
                                                           name="register_to" placeholder="Start Date" value="">
                                                    <img class="black-calender"
                                                         src="{{voyager_asset('icon/black-calender.svg')}}">
                                                    <img class="delet-value"
                                                         src="{{voyager_asset('icon/delet-value.svg')}}">
                                                </div>
                                            </div>
                                        </div>

                                        <div style="margin-top: 20px">
                                            Wallet
                                        </div>

                                        <div class="margin-bottom padding-item col-lg-12 col-md-12 col-sm-12"
                                             style="flex: 1;">
                                            <div class=" input-row">
                                                <label>
                                                    less than
                                                </label>
                                                <input type="text" placeholder="segment name" name="wallet_less">
                                            </div>
                                        </div>

                                        <div class="margin-bottom padding-item col-lg-12 col-md-12 col-sm-12"
                                             style="flex: 1;">
                                            <div class=" input-row">
                                                <label>
                                                    more than
                                                </label>
                                                <input type="text" placeholder="segment name" name="wallet_more">
                                            </div>
                                        </div>

                                        <div class="button-group right">
                                            <button type="submit" class="flex-box add-new">
                                                <img src="{{voyager_asset('icon/change.svg')}}">
                                                <p>
                                                    {{ __('voyager::generic.save') }}
                                                </p>

                                            </button>
                                        </div>
                                    </div>

                                </form>


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


    <style>
        .newCustomSelectBox.showSelect2 .select2-container--default {
            display: block;
        }

        .newCustomSelectBox.showSelect2 .select2-selection__rendered{
            display: flex;
            justify-content: flex-end;
            flex-wrap: wrap;
        }
        .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice{
            padding-right: 9px;
            margin-right: 0;
        }

        .dropdown .select2-selection{
            position: relative;
            color: var(--font-color) !important;
            width: 100%;
            box-sizing: border-box;
            border-radius: 8px;
            padding: 15px 20px !important;
            background: var(--input-bg);
            border: 1px solid var(--pagination-borde);
            cursor: pointer;
            justify-content: space-between;
            align-items: center;
            margin: 5px 0;
            font-weight: 500;

        }

        .select2-dropdown.select2-dropdown--below{
            min-width: 300px !important;
        }
    </style>

@endsection

@section('javascript')
    <script type="text/javascript" src="{{voyager_asset('js/rte.js')}}"></script>
    <script type="text/javascript" src="{{voyager_asset('js/all_plugins.js')}}"></script>


    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/nano.min.css"/>
    <link href="{{ voyager_asset('css/jalalidatepicker.min.css') }}" rel="stylesheet">


    <script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.es5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="{{ voyager_asset('js/jalalidatepicker.min.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>


    <script>

        let need_resize = 0;

        $('body').on('DOMNodeInserted', function (e) {

            $(".select2-dropdown--below").ready(function () {


                const drop_down = $(".select2-dropdown--below");

                if (drop_down) {


                    need_resize++;
                    if (need_resize === 1) {

                        if ($(".select2-selection--single").width()) {
                            drop_down.width($(".select2-selection--single").width()).css('margin-top', "20px")
                        } else {
                            drop_down.width($(".select2-selection--multiple").width()).css('margin-top', "20px")
                        }
                    } else if (need_resize === 2)
                        need_resize = 0;
                } else
                    need_resize = 0;
            });


        });

        $(document).ready(function() {
            $('.js-example-basic-multiple').select2({
                width:"100%",
                tags: true,
            });

        });



        $(window).scroll(function (event) {

            $(".select2-dropdown--below").ready(function () {

                const drop_down = $(".select2-dropdown--below");
                const dropDown1 = $(".select2-selection--multiple");


                if (drop_down) {

                    need_resize++;
                    if (need_resize === 1) {
                        if ($(".select2-selection--single")) {
                            // drop_down.width($(".select2-selection--single").width()).css('margin-top', "20px");
                            drop_down.css({'width': $(".select2-selection--single").width() + 40, 'margin-top': "20px"})
                            drop_down.css({
                                "width": $(".select2-selection--multiple").width() + 40,
                                'margin-top': "20px"
                            })

                        } else {
                            console.log("need_resize")

                            drop_down.css({
                                "width": $(".select2-selection--multiple").width() + 40,
                                'margin-top': "20px"
                            })
                        }
                    } else if (need_resize === 2)
                        need_resize = 0;
                } else
                    need_resize = 0;
            });


        })

        $(".mySelectionItem").click(function () {


        })

        $('document').ready(function () {
            $('.toggleswitch').bootstrapToggle();

            //Init datepicker for date fields if data-datepicker attribute defined
            //or if browser does not handle date inputs
            $('.form-group input[type=date]').each(function (idx, elt) {
                if (elt.hasAttribute('data-datepicker')) {
                    elt.type = 'text';
                    $(elt).datetimepicker($(elt).data('datepicker'));
                } else if (elt.type != 'date') {
                    elt.type = 'text';
                    $(elt).datetimepicker({
                        format: 'L',
                        extraFormats: ['YYYY-MM-DD']
                    }).datetimepicker($(elt).data('datepicker'));
                }
            });

            @if ($isModelTranslatable)
            $('.layout .main .inside').multilingual({"editing": true});
            @endif

            $('.side-body input[data-slug-origin]').each(function (i, el) {
                $(el).slugify();
            });

            $('.form-group').on('click', '.remove-multi-image', deleteHandler('img', true));
            $('.form-group').on('click', '.remove-single-image', deleteHandler('img', false));
            $('.form-group').on('click', '.remove-multi-file', deleteHandler('a', true));
            $('.form-group').on('click', '.remove-single-file', deleteHandler('a', false));

            $('#confirm_delete').on('click', function () {
                $.post('{{ route('voyager.'.$dataType->slug.'.media.remove') }}', params, function (response) {
                    if (response
                        && response.data
                        && response.data.status
                        && response.data.status == 200) {

                        toastr.success(response.data.message);
                        $file.parent().fadeOut(300, function () {
                            $(this).remove();
                        })
                    } else {
                        toastr.error("Error removing file.");
                    }
                });

                $('#confirm_delete_modal').modal('hide');
            });
            $('[data-toggle="tooltip"]').tooltip();
        });

        $('document').ready(function () {
            $('.toggleswitch').bootstrapToggle();

            //Init datepicker for date fields if data-datepicker attribute defined
            //or if browser does not handle date inputs
            $('.form-group input[type=date]').each(function (idx, elt) {
                if (elt.hasAttribute('data-datepicker')) {
                    elt.type = 'text';
                    $(elt).datetimepicker($(elt).data('datepicker'));
                } else if (elt.type != 'date') {
                    elt.type = 'text';
                    $(elt).datetimepicker({
                        format: 'L',
                        extraFormats: ['YYYY-MM-DD']
                    }).datetimepicker($(elt).data('datepicker'));
                }
            });

            @if ($isModelTranslatable)
            $('.layout .main .inside').multilingual({"editing": true});
            @endif

            $('.side-body input[data-slug-origin]').each(function (i, el) {
                $(el).slugify();
            });

            $('.form-group').on('click', '.remove-multi-image', deleteHandler('img', true));
            $('.form-group').on('click', '.remove-single-image', deleteHandler('img', false));
            $('.form-group').on('click', '.remove-multi-file', deleteHandler('a', true));
            $('.form-group').on('click', '.remove-single-file', deleteHandler('a', false));

            $('#confirm_delete').on('click', function () {
                $.post('{{ route('voyager.'.$dataType->slug.'.media.remove') }}', params, function (response) {
                    if (response
                        && response.data
                        && response.data.status
                        && response.data.status == 200) {

                        toastr.success(response.data.message);
                        $file.parent().fadeOut(300, function () {
                            $(this).remove();
                        })
                    } else {
                        toastr.error("Error removing file.");
                    }
                });

                $('#confirm_delete_modal').modal('hide');
            });
            $('[data-toggle="tooltip"]').tooltip();
        });
        // $("input[type='date']").click(function (){
        //     $(this).showPicker();
        // });


        const dateInput = document.getElementsByClassName("datePickerInput");
        // console.log(dateInput);

        dateInput.forEach(function (item, index) {
            item.addEventListener("click", function () {
                console.log(item)
                try {
                    item.showPicker();
                    // A date picker is shown.
                } catch (error) {
                    // Use external library when this fails.
                }
            });
        })

    </script>

    <script>
        $(" #drop-down-add-tag .select-selected").text("Search the list");
        $("#drop-down-add-tag .select-items div").on("click", function () {
            var filename = $(this).text();
            console.log(filename)
            $(".dropdown-tag-row").append("<div class=\"acsses  files\">" +
                "<div class=\"flex-box\">" +
                "<img class='close-tag' src=\"assets/icon/clos.svg\">"
                + filename +
                "</div>" +
                "</div>");
            $('.close-tag').click(function () {
                $(this).parent().parent().fadeOut();
            });

            $(" #drop-down-add-tag .select-selected").text("Search the list");


        })
    </script>

    <script>
        $(" #drop-down-add-tag-city .select-selected").text("Search the list");
        $("#drop-down-add-tag-city .select-items div").on("click", function () {
            var filename = $(this).text();
            console.log(filename)
            $(".dropdown-tag-row").append("<div class=\"acsses  files\">" +
                "<div class=\"flex-box\">" +
                "<img class='close-tag' src=\"assets/icon/clos.svg\">"
                + filename +
                "</div>" +
                "</div>");
            $('.close-tag').click(function () {
                $(this).parent().parent().fadeOut();
            });

            $(" #drop-down-add-tag-city .select-selected").text("Search the list");


        })
    </script>

@endsection