@extends('layouts.main_admin')

@section('content')

    <!-- <div class="content-page"> -->
    <div class="page-body">
        <div class="container-fluid">
            <div class="page-title">
                <div class="row">
                    <div class="col-6">
                        <h3>@lang('site.categories')</h3>
                    </div>
                    <div class="col-6">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">@lang('site.dashboard')</li>

                            <li class="breadcrumb-item active">
                                @lang('site.categories')
                                @endlang
                            </li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>


        <div class="container-fluid">

            <div class="row">
                <!-- Individual column searching (text inputs) Starts-->
                <div class="col-sm-12">
                    <div class="card mt-30">
                        <form action="{{ route('dashboard.place_categories.store') }}" method="post"
                            enctype="multipart/form-data" id="" class="form-main">

                            {{ csrf_field() }}
                            {{ method_field('post') }}
                            <div class="bg-secondary-lighten card-header d-flex justify-content-between">
                                <h5>@lang('site.add') </h5>
                                <div class="text-end  group-btn-top">
                                    <div class="form-group d-flex form-group justify-content-between">
                                        <button type="button" class="btn btn-pill btn-outline-primary btn-air-primary"
                                            onclick="history.back();">

                                            @lang('site.back')
                                        </button>
                                        <button type="submit" class="btn btn-air-primary btn-pill btn-primary"><i
                                                class="fa fa-plus p-1"></i>
                                            @lang('site.add')</button>
                                    </div>
                                </div>


                            </div>
                            <div class="card-body">
                                @include('partials._errors')

                                {{-- @if ($errors->any())
                                <div class="alert">
                                  <ul> --}}
                                {{-- @foreach ($errors->all() as $error) --}}
                                {{-- @if ($errors->has('name_ar'))
                                    <li class="text-danger">* @lang('site.name_arError') </li>
                                    @endif
                                    @if ($errors->has('name_en'))
                                    <li class="text-danger">* @lang('site.name_enError') </li>
                                    @endif
                                    @if ($errors->has('description'))
                                    <li class="text-danger">* @lang('site.descriptionError') </li>
                                    @endif
                                    @if ($errors->has('flag'))
                                    <li class="text-danger">* @lang('site.flagError') </li>
                                    @endif --}}

                                {{-- @endforeach --}}
                                {{-- </ul>
                                </div>
                              @endif --}}
                                <div class="row">


                                    <div class="col-md-6 form-group col-12 p-2 ">
                                        <label>@lang('site.ar.name')<span class="text-danger">*</span></label>
                                        <input type="text" name="name_ar" class="form-control"
                                            value="{{ old('name_ar') }}" required>
                                    </div>


                                    <div class="col-md-6 form-group col-12 p-2 ">
                                        <label>@lang('site.en.name')</label>
                                        <input type="text" name="name_en" class="form-control"
                                            value="{{ old('name_en') }}">
                                    </div>

                                    {{--                                    <div class="col-md-6 form-group col-12 p-2 "> --}}
                                    {{--                                        <label class="form-label">@lang('site.city')</label> --}}
                                    {{--                                        <select class="js-example-placeholder-multiple col-sm-12" multiple="multiple" --}}
                                    {{--                                                name="city_id[]"> --}}
                                    {{--                                            <option selected>@lang('site.select')</option> --}}
                                    {{--                                            @foreach ($cities as $city) --}}

                                    {{--                                                <option value="{{$city->id}}">{{$city->name_ar ?? ''}}</option> --}}

                                    {{--                                            @endforeach --}}

                                    {{--                                        </select> --}}
                                    {{--                                    </div> --}}
                                </div>
                                <div class="row">
                                    <!--<div class="col-md-6">-->

                                    <div class="col-md-6 form-group col-12 p-2 ">
                                        <label>@lang('site.description')</label>
                                        <textarea class="form-control" cols="5" rows="5" name="description"></textarea>
                                    </div>

                                    <div class="col-md-6 form-group">
                                        <label class="form-label">@lang('site.flag')</label><span
                                            class="text-danger">*</span>
                                        <br>
                                        <select class="js-example-placeholder-multiple col-sm-12" name="flag" required>
                                            <option value="">@lang('site.select')</option>
                                            <option value="resturant">@lang('site.resturant')</option>
                                            <option value="not_resturant">@lang('site.not_resturant') </option>
                                            <option value="app_important">@lang('site.app_important') </option>
                                        </select>
                                    </div>

                                    <div class="col-md-6 form-group">
                                        <label class="form-label">@lang('site.go_or_not')</label><span
                                            class="text-danger">*</span>
                                        <br>
                                        <select class="js-example-placeholder-multiple col-sm-12" name="go_or_not" required>
                                            <option value="">@lang('site.select')</option>
                                            <option value="not_go_to">@lang('site.not_go_to')</option>
                                            <option value="go_to">@lang('site.go_to') </option>

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


                                <div class="row">


                                    <div class="col-md-6 form-group col-12 p-2">
                                        <label>@lang('site.image')</label><span class="text-danger">*</span>

                                        <input type="file" class="form-control" name="image" id="imgInp" required />
                                        <img id="frame" src="" width="200px" class="img-upload" />

                                    </div>

                                    <div class="col-md-6 form-group col-12 p-2">

                                        <label>@lang('site.icon_in_app')</label>
                                        <input type="file" class="form-control" name="icon" id="imgInp2" />
                                        <img id="frame2" src="" width="200px" class="img-upload2" />

                                    </div>

                                </div>

                                <div class="row m-0">
                                    <h4 class="card-title">@lang('site.subcategories')</h4>
                                    <div class="col-md-12 form-group col-12 desc" id="price2">
                                        <table class="price-list" id="tb_price">
                                            <tr>
                                                <td>
                                                    <div class="row">
                                                        <div class="col-md-5 form-group col-12">
                                                            <label>@lang('site.ar.name')<span
                                                                    class="text-danger">*</span></label>
                                                            <input type="text" name="name_ar_category[]"
                                                                class="form-control" />
                                                        </div>
                                                        <div class="col-md-5 form-group col-12">
                                                            <label>@lang('site.en.name')</label>
                                                            <input type="text" name="name_en_category[]"
                                                                class="form-control" />
                                                        </div>
                                                        <div class="col-md-5 form-group col-12">
                                                            <label>@lang('site.image')</label>
                                                            <input type="file" name="image_category[]"
                                                                class="form-control">
                                                        </div>


                                                        <div class="col-md-5 form-group col-12">
                                                            <br>
                                                            {{-- <label>@lang('site.add_more')</label> --}}
                                                            <a
                                                                class="btn btn-air-primary btn-pill btn-success add-price w-50"><i
                                                                    class="fa fa-plus" aria-hidden="true"></i></a>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                        </table>

                                    </div>
                                </div>

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

            </form>
            <!--    </div>-->
        </div>
    </div><!--</div>-->

    </div>
    <!-- Container-fluid Ends-->

@endsection

@section('scripts')
    <script>
        var imgUploads = document.getElementById("upload-imgs"),
            imgPreviews = document.getElementById("img-previews"),
            imgUploadForms = document.getElementById("form-upload"),
            totalFiles,
            previewTitle,
            previewTitleText,
            img,
            img2,

            imgUploads.addEventListener("change", previewImgss, true);

        function previewImgss(event) {
            totalFiles = imgUploads.files.length;

            if (!!totalFiles) {
                imgPreviews.classList.remove("img-thumbs-hidden");
            }

            for (var i = 0; i < totalFiles; i++) {
                wrapper = document.createElement("div");
                wrapper.classList.add("wrapper-thumb");
                removeBtn = document.createElement("span");
                nodeRemove = document.createTextNode("x");
                removeBtn.classList.add("remove-btn");
                removeBtn.appendChild(nodeRemove);
                img = document.createElement("img");
                img.src = URL.createObjectURL(event.target.files[i]);
                img.classList.add("img-preview-thumb");
                wrapper.appendChild(img);
                wrapper.appendChild(removeBtn);
                imgPreviews.appendChild(wrapper);

                $(".remove-btn").click(function() {
                    $(this).parent(".wrapper-thumb").remove();
                });
            }
        }
        document.getElementById("imgInp").onchange = function() {
            let imgURL = (frame.src = URL.createObjectURL(event.target.files[0]));
            document.querySelector("img").src = imgURL;
        };
        document.getElementById("imgInp2").onchange = function() {
            let imgURL2 = (frame2.src = URL.createObjectURL(event.target.files[0]));
            document.querySelector("img2").src = imgURL2;
        };
    </script>
    <script>
        $(document).ready(function() {
            jQuery('a.add-price').click(function(event) {
                event.preventDefault();
                var newRow = jQuery(
                    '<tr><td><div class="row"><div class="col-md-5 form-group col-12 p-2">' +
                    ' <label>@lang('site.ar.name')</label><input type="text"  name="name_ar_category[]" class="form-control"/></div><div class="col-md-5 form-group col-12 p-2">' +
                    ' <label>@lang('site.en.name')</label><input type="text"  name="name_en_category[]" class="form-control"/></div><div class="col-md-5 form-group col-12 p-2">' +
                    ' <label>@lang('site.image')</label><input type="file" name="image_category[]" class="form-control" >' +
                    '  </div>  <div class="col-md-2 form-group col-12 p-2 "> <a class="btn btn-air-primary btn-pill btn-danger add-price w-100" onclick="deletetr(this)" ><i class="fa fa-trash"></i></a>' +

                    '</div></div> </td>  </tr>');
                jQuery('.price-list').append(newRow);
            });

            $("input[name='price']").click(function() {
                var test = $(this).val();

                $("div.desc").hide();
                $("#price" + test).show();
            });
        });

        function deletetr(r) {
            r.closest('tr').remove();
        }
    </script>
@endsection