@extends("admin.layouts.app")
@section("styles")
    <link href="https://cdn.ihouse.ps/admin_assets/assets/global/plugins/select2/css/select2.min.css" rel="stylesheet"
          type="text/css"/>
    <link href="https://cdn.ihouse.ps/admin_assets/assets/global/plugins/select2/css/select2-bootstrap.min.css"
          rel="stylesheet" type="text/css"/>

    <link href="https://cdn.ihouse.ps/admin_assets/assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css"
          rel="stylesheet" type="text/css"/>
    <link href="https://cdn.ihouse.ps/assets/global/plugins/select2/css/select2.min.css" rel="stylesheet" type="text/css"/>
    <link href="https://cdn.ihouse.ps/assets/global/plugins/select2/css/select2-bootstrap.min.css" rel="stylesheet"
          type="text/css"/>
@endsection

@section("content")
    <div class="row">
        <div class="col-md-12">
            <div class="portlet light bordered">
                <div class="portlet-title">
                    <div class="caption font-green">
                        <i class="icon-plus font-green"></i>
                        <span class="caption-subject bold uppercase">New Price Types</span>
                    </div>
                </div>

                @isset($errors)
                    @foreach($errors as $key => $error)
                        <div dir="rtl" class="alert alert-danger alert-dismissible" role="alert">
                            <strong>{{'خطأ !'}}</strong> {{$error[0]}}
                            <button dir="ltr" type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    @endforeach
                @endisset

                <!-- Navigation Tabs -->
                <ul class="nav nav-tabs">
                    <li class="{{request()->get('type')!=='accessory'|request()->get('type')=='general'?'active':''}}" data-tab="general"><a data-toggle="tab" href="#general">Item Price Type </a></li>
                    <li class="{{request()->get('type')=='accessory'?'active':''}}" data-tab="accessory"><a data-toggle="tab" href="#accessory">Accessory Discount </a></li>
                </ul>


                <!-- Tab Content -->
                <div class="tab-content">
                    <div id="general" class="tab-pane fade in {{request()->get('type')!=='accessory'|request()->get('type')=='general'?'active':''}}">
                        <div class="portlet-body form">
                            {{ Form::open(['route' => "admin.price-types.store", 'role' => "form"]) }}

                            <div class="form-body">
                                <div class="form-group form-md-line-input ">
                                    {{ Form::text("name", NULL, ['class' => 'form-control m-input']) }}
                                    {{ Form::label("name", "Title") }}
                                </div>
                                <div class="form-group form-md-line-input ">
                                    {{ Form::text("percentage", NULL, ['class' => 'form-control m-input']) }}
                                    {{ Form::label("percentage", "Percentage") }}
                                </div>
                                <div class="input-group input-large date-picker input-daterange" data-date-format="dd/mm/yyyy">
                                    {{ Form::text("from", NULL, ['class' => "form-control"]) }}
                                    <span class="input-group-addon"> to </span>
                                    {{ Form::text("to", NULL, ['class' => "form-control"]) }}
                                </div>
                                <div class="form-group m-form__group">
                                    {{ Form::label("categories", trans("constants.categories")) }}
                                    {{ Form::select("categories[]", $categories, NULL, ["multiple" => "true", 'class' => 'form-control select2-multiple']) }}
                                </div>
                            </div>

                            <div class="form-actions noborder">
                                <button type="submit" class="btn blue">@lang("constants.create")</button>
                                <button type="reset" class="btn default">@lang("constants.clear")</button>
                            </div>

                            {{ Form::close() }}
                        </div>
                    </div>

                    <div id="accessory" class="tab-pane fade {{request()->get('type')=='accessory'?' in active':''}}">
                        <div class="portlet-body form">
                            {{ Form::open(['route' => "admin.price-types.accessory-discount", 'type'=>'general', 'role' => "form"]) }}

                            <div class="form-group form-md-line-input " >
                                {{ Form::text("name", NULL, ['class' => 'form-control m-input','required' => 'required']) }}
                                {{ Form::label("name", "Title") }}
                            </div>
                            <div class="form-group form-md-line-input ">
                                {{ Form::number("percentage", NULL, ['class' => 'form-control m-input','required' => 'required']) }}
                                {{ Form::label("percentage", "Percentage") }}
                            </div>
                            <div class="input-group input-large date-picker input-daterange" data-date-format="dd/mm/yyyy">
                                {{ Form::text("from", NULL, ['class' => "form-control",'required' => 'required']) }}
                                <span class="input-group-addon"> to </span>
                                {{ Form::text("to", NULL, ['class' => "form-control",'required' => 'required']) }}
                            </div>

                            <div class="form-group form-md-line-input ">
                                <div class="form-group mb-0">
                                    <label for="accessory_category" class="d-none d-md-block h5 mb-0 font-weight-bold">
                                        التصنيف
                                    </label>

                                    <select class="form-control select2 dependent-select" id="accessory_category" name="accessory-category"
                                             data-placeholder="اختر التصنيف" required>
                                        <option></option>
                                        @foreach(IHouse::getParentAccessoryCategories() as $category)
                                            <option
                                                value="{{ $category->id }}"
                                                {{ is_array(request('accessory-category')) && in_array($category->id, request('accessory-category')) ? 'selected' : '' }}>

                                                {{ $category->title }}

                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="form-group form-md-line-input ">
                                <div class="form-group mb-0" id="brand_options">
                                    <label for="brand" class="d-none d-md-block h5 mb-0 font-weight-bold">باستثاء الشركة المصنعة</label>
                                    <select class="form-control select2" id="brand" name="brand"
                                            multiple="multiple" data-placeholder="اختر الشركة المصنعة">
                                        <option></option>
                                        @foreach(isset($brand) ? IHouse::getBrands() : \App\facades\IHouseFacade::getBrandOptions(request()) as $brand)
                                            <option value="{{ $brand->id }}"
                                                {{ is_array(request()->get('brand')) && in_array($brand->id, request()->get('brand')) ? 'selected' : '' }}>
                                                {{ $brand->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div><!-- brands -->

                            <div class="form-group form-md-line-input ">
                                <div class="form-group mb-0">
                                    <label for="category" class="d-none d-md-block h5 mb-0 font-weight-bold">متوافق مع</label>
                                    <select class="form-control select2" id="category" name="category"  data-placeholder="اختر متوافق مع" >
                                        <option></option>
                                        @foreach($categories as $categorySlug => $category)
                                            @if(is_array($category) && sizeof($category))
                                                <optgroup label="{{ $category['all'] }}">
                                                    <option
                                                        value="{{$categorySlug}}" {{ is_array(request()->get('category')) && in_array($categorySlug, request()->get('category')) ? 'selected' : '' }}>
                                                        {{ __('labels.all_compatible_with',['name'=> $category['all']]) }}
                                                    </option>
                                                    @foreach($category as $subCategorySlug => $subCategory)
                                                        @if($subCategorySlug=='all' || $subCategorySlug == 'order')
                                                            @continue
                                                        @endif
                                                        <option value="{{$subCategorySlug}}"
                                                            {{ is_array(request()->get('category')) && in_array($subCategorySlug, request()->get('category')) ? 'selected' : '' }}>
                                                            {{ $subCategory }}
                                                        </option>
                                                    @endforeach
                                                </optgroup>
                                            @else
                                                <option value="{{$categorySlug}}"
                                                    {{ is_array(request()->get('category')) && in_array($categorySlug, request()->get('category')) ? 'selected' : '' }}>
                                                    {{ $category }}
                                                </option>
                                            @endif
                                        @endforeach
                                    </select>
                                </div>
                            </div>




                            <div class="form-actions noborder">
                                <button type="submit" class="btn blue">@lang("constants.create")</button>
                                <button type="reset" class="btn default">@lang("constants.clear")</button>
                            </div>
                        </div>


                        {{ Form::close() }}
                    </div>
                </div>


            </div>
        </div>
    </div>
@endsection

@section("scripts")
    <script src="https://cdn.ihouse.ps/admin_assets/assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js"
            type="text/javascript"></script>
    <script src="https://cdn.ihouse.ps/admin_assets/assets/global/plugins/select2/js/select2.full.min.js"
            type="text/javascript"></script>
    <script>

        $(document).ready(function() {
            function updateUrl(tabName) {
                console.log(tabName)
                var baseUrl = window.location.href.split('?')[0];
                var newUrl = baseUrl + '?type=' + tabName;
                window.history.pushState({path:newUrl},'',newUrl);
            }

            // Event listener for tab clicks
            $('.nav-tabs li').click(function() {
                var tabName = $(this).data('tab');
                console.log(tabName)
                updateUrl(tabName);
            });
        });
        function appendHashToLinks() {
            $('.pagination').each(function (element) {
                var hash = window.location.hash;
                var links = $(this).find('a');

                links.each(function (link) {
                    var href = $(this).attr('href');
                    href = href.replace('#general', '');
                    href = href.replace('#accessory', '');
                    $(this).attr('href', href + hash);
                });
            });
        }

        $(function () {
            // initTabHash();
            appendHashToLinks();
        })


        $.fn.select2.defaults.set("theme", "bootstrap");
        $(".select2-multiple").select2({
            placeholder: "Select category or more",
            width: null
        });
        $(".select2").select2({
            placeholder: "Select category or more",
            width: null,
            allowClear: true,
        }).on("select2:select", function (e) {
            $(this).select2("close"); // Force the dropdown to close
        });


        $(".date-picker").datepicker({ format: 'dd/mm/yyyy', rtl: App.isRTL(), autoclose: true });


        $(document).ready(function () {
            $('.dependent-select').on('change', function () {
                var thisVal = $(this).val();
                getAccessoryCategories(thisVal);
            });

            function getAccessoryCategories(accessoryCategory, selected = '') {
                if (!accessoryCategory) {
                    $("#sub_accessories_categories").select2().empty().select2({
                        data: []
                    });
                    return;
                }

                $.ajax(`/category/${accessoryCategory}/childs`,
                    {
                        success: function (data, status, xhr) {
                            console.log(data);
                            var targetElementData = [];

                            targetElementData.push({'id': '', 'text': ''});

                            $.each(data, function (index) {
                                targetElementData.push({'id': index, 'text': data[index]});
                            });

                            $("#sub_accessories_categories").select2().empty().select2({
                                data: targetElementData
                            });

                            $("#sub_accessories_categories").val(selected).trigger('change');
                        }
                    });
            }

            if ($("#advanceOptionsButton").is(":visible")) {
                $("#advanceOptions").removeClass('show');
            }
        })

    </script>
@endsection