@extends('admin.layouts.master')
@section('title') Aramian Brother`s Jewelry @endsection

@section('content')
@include('admin.layouts.topbar')
@include('admin.layouts.sidebar')
<script type='text/javascript'>

    (function()
    {
      if( window.localStorage )
      {
        if( !localStorage.getItem('firstLoad') && !localStorage.getItem('thefirstLoad') )
        {
          localStorage['firstLoad'] = true;
          localStorage['thefirstLoad'] = true;
        //   setTimeout(function(){
            window.location.reload(1);
        // }, 1000);
        }  
        else
          localStorage.removeItem('firstLoad');
        //   localStorage.removeItem('thefirstLoad');
      }
    })();

    let previousUrl = window.location.href;

    // Listen for changes in the browser's history
    window.addEventListener('popstate', function (event) {
    const currentUrl = window.location.href;
    
    if (previousUrl !== currentUrl) {
        // If the URL has changed, remove an item from localStorage
        localStorage.removeItem('thefirstLoad'); // Replace 'yourKey' with the key you want to remove
        
        // Update the previous URL to the current one
        previousUrl = currentUrl;
    }
});

// Also monitor history changes through pushState/replaceState (manually detect URL change)
(function() {
    const originalPushState = history.pushState;
    const originalReplaceState = history.replaceState;
    
    history.pushState = function() {
        originalPushState.apply(this, arguments);
        checkUrlChange();
    };
    
    history.replaceState = function() {
        originalReplaceState.apply(this, arguments);
        checkUrlChange();
    };
    
    function checkUrlChange() {
        const currentUrl = window.location.href;
        
        if (previousUrl !== currentUrl) {
            // If the URL has changed, remove an item from localStorage
            localStorage.removeItem('thefirstLoad'); // Replace 'yourKey' with the key you want to remove
            
            // Update the previous URL to the current one
            previousUrl = currentUrl;
        }
    }
})();
    
    </script>
<main id="main" class="p-4">
    <title>Admin</title>
    <style type="text/css"></style>

    <div id="app">
        <section class="content-header clearfix">
            <h1>
                Products
                <small>Create</small>
            </h1>

            <!-- breadcrumb start -->
            <nav aria-label="breadcrumb" class="breadcrumb-nav">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{route('home')}}"><i class="icon-home"></i>Home</a></li>
                    <li class="breadcrumb-item">
                        <a href="{{route('adminpanel.product.index')}}">
                            Product
                        </a>
                    </li>
                    <li class="breadcrumb-item">
                        <a href="{{route('adminpanel.adminpanel.product.create')}}">
                            Create
                        </a>
                    </li>
                </ol>
            </nav>
        </section>
            @if (session('success'))
                <div class="alert alert-success">
                    {{ session('success') }}
                </div>
            @endif
            @if (session('error'))
                <div class="alert alert-danger">
                    {{ session('error') }}
                </div>
            @endif
            @if($errors)
                @foreach ($errors->all() as $error)
                    <div class="alert alert-danger">{{ $error }}</div>
                @endforeach
            @endif
        <section class="content">
            <div class="row"><div class="col-md-12"><div class="card box-info">
                <div class="card-header with-border">
                    <h3 class="card-title">Create</h3>
                    <div class="card-tools">
                        <div class="btn-group">
                        <a href="{{url('adminpanel/product')}}" class="btn btn-sm btn-default btn-light me-2" title="List"><i class="icon-list"></i><span class="hidden-xs">&nbsp;List</span></a>
                        </div>
                    </div>
                </div>
                <!-- /.box-header -->
                <!-- form start -->
                <form  method="post" action="{{route('adminpanel.prods.store')}}" 
                    class="form-horizontal form default-valid  has-ajax-handler" 
                    accept-charset="UTF-8" 
                    pjax-container="1" 
                    enctype="multipart/form-data"
                    >
                    @method('POST')
                    @csrf
           
                    <div class="card-body p-0">
                        <div class="row fields-group">
                            <div class="col-md-1"></div>
                            <div class="col-md-5">
                                <label bel for="title" class="form-label">Title</label>
                                <div class="form-group row  ">
                                    <div class="col-sm-8">
                                        <div class="input-group">
                                            <span class="input-group-text with-icon"><i class="icon-pencil-alt"></i></span>
                                            <input type="text" id="title" name="title" value="{{old('title')}}" class="form-control title" placeholder="Input Title">
                                            @if ($errors->has('title'))
                                            <span class="invalid-feedback" role="alert" style="display: block">
                                                <strong>{{ $errors->first('title') }}</strong>
                                            </span>
                                            @endif 
                                        </div>

                                    </div>
                                </div>
                                <label for="description" class="form-label">Description</label>
                                <div class="form-group row  ">
                                    <div class="col-sm-8">
                                        <div class="input-group">
                                            <span class="input-group-text with-icon"><i class="icon-pencil-alt"></i></span>
                                                <input type="text" id="description" name="description" value="" class="form-control description" placeholder="Input Description">
                                        </div>
                                    </div>
                                </div>
                                <label for="code" class="form-label">Code</label>
                                <div class="form-group row  ">
                                    <div class="col-sm-8">
                                        <div class="input-group">
                                            <span class="input-group-text with-icon"><i class="icon-pencil-alt"></i></span>
                                            <input type="text" id="code" name="code" value="" class="form-control code" placeholder="Input Code">
                                        </div>
                                    </div>
                                </div>
                                <label for="products_image_main_image" class="form-label">Main Image</label>
                                <div class="form-group row  ">
                                    <div class="col-sm-8">
                                        <div class="file-upload-preview-div form-field-helper d-none"><div class="files existing"></div><div class="files new"></div></div><div class="input-group">
                                                <input type="file" class="form-control products_image_main_image_" name="main_image" id="products_image_main_image">
                                                <span class="input-group-btn"></span>
                                        </div>
                                    </div>
                                </div>
                                <label for="products_image_image_name" class="form-label">Images</label>
                                <div class="form-group row  ">
                                    <div class="col-sm-8">
                                        <div class="file-upload-preview-div form-field-helper d-none"><div class="files existing"></div><div class="files new"></div></div><div class="input-group">
                                            <input type="file" class="form-control products_image_image_name_" name="image_name[]" multiple="" id="products_image_image_name__">
                                            <span class="input-group-btn"></span>
                                        </div>
                                    </div>
                                </div>
                                <label for="price" class="form-label">Price</label>
                                <div class="form-group row  ">
                                    <div class="col-sm-8">
                                        <div class="input-group">
                                        <span class="input-group-text with-icon"><i class="icon-pencil-alt"></i></span>
                                        <input style="max-width: 160px; text-align: right;" type="text" id="price" name="price" value="" class="form-control price" placeholder="Input Price" inputmode="decimal">
                                    </div>
                                </div>
                            </div>
                            <label for="discount_price" class="form-label">Discount</label>
                            <div class="form-group row  ">
                                <div class="col-sm-8">
                                    <div class="input-group">
                                        <span class="input-group-text with-icon"><i class="icon-pencil-alt"></i></span>
                                        <input style="max-width: 160px; text-align: right;" type="text" id="discount_price" name="discount_price" value="" class="form-control discount_price" placeholder="Input Discount" inputmode="decimal">
                                    </div>
                                </div>
                            </div>
                            <label for="material" class="form-label">Material</label>
                            <div class="form-group row  ">
                                <div class="col-sm-8">
                                    <div class="input-group">
                                        <span class="input-group-text with-icon"><i class="icon-pencil-alt"></i></span>
                                        <input type="text" id="material" name="material" value="" class="form-control material" placeholder="Input Material">
                                    </div>
                                </div>
                            </div>
                            <label for="purity" class="form-label">Purity</label>
                            <div class="form-group row  ">
                                <div class="col-sm-8">
                                    <div class="input-group">
                                        <span class="input-group-text with-icon"><i class="icon-pencil-alt"></i></span>
                                        <input style="max-width: 160px; text-align: right;" type="text" id="purity" name="purity" value="" class="form-control purity" placeholder="Input Purity" inputmode="decimal">
                                    </div>
                                </div>
                            </div>
                            <label for="weight" class="form-label">Weight</label>
                            <div class="form-group row  ">
                                <div class="col-sm-8">
                                    <div class="input-group">
                                        <span class="input-group-text with-icon"><i class="icon-pencil-alt"></i></span>
                                        <input style="max-width: 160px; text-align: right;" type="text" id="weight" name="weight" value="" class="form-control weight" placeholder="Input Weight" inputmode="decimal">
                                    </div>
                                </div>
                            </div>
                            <label for="diamond" class="form-label">Diamond</label>
                            <div class="form-group row  ">
                                <div class="col-sm-8">
                                    <div class="input-group">
                                        <span class="input-group-text with-icon"><i class="icon-pencil-alt"></i></span>
                                        <input style="max-width: 160px; text-align: right;" type="text" id="diamond" name="diamond" value="" class="form-control diamond" placeholder="Input Diamond" inputmode="decimal">
                                    </div>
                                </div>
                            </div>
                            <div class="multi-row" style="border-style: solid;border-color: rgb(104, 96, 96);">
                                <div class="row-block">
                                    <label for="products_pcs_pcs_img" class="form-label">Pcs Image</label>
                                    <div class="form-group row  ">
                                        <div class="col-sm-8">
                                            <div class="file-upload-preview-div form-field-helper d-none"><div class="files existing"></div><div class="files new"></div></div><div class="input-group">
                                                <input type="file" class="form-control products_pcs_pcs_img_" name="pcs_img[0]" id="products_pcs_pcs_img">
                                                <span class="input-group-btn"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <label for="products_pcs_pcs_count" class="form-label">Pcs Count</label>
                                    <div class="form-group row  ">
                                        <div class="col-sm-8">
                                            <div class="input-group">
                                                <span class="input-group-text with-icon"><i class="icon-pencil-alt"></i></span>
                                                <input style="max-width: 160px; text-align: right;" type="text" id="products_pcs_pcs_count" name="pcs_count[0]" value="" class="form-control products_pcs_pcs_count_" placeholder="Input Pcs Count" inputmode="decimal">
                                            </div>
                                        </div>
                                    </div>
                                    <label for="products_pcs_pcs_txt" class="form-label">Pcs Title</label>
                                    <div class="form-group row  ">
                                        <div class="col-sm-8">
                                            <div class="input-group">
                                                <span class="input-group-text with-icon"><i class="icon-pencil-alt"></i></span>
                                                <input type="text" id="products_pcs_pcs_txt" name="pcs_txt[0]" value="" class="form-control products_pcs_pcs_txt_" placeholder="Input Pcs Title">
                                            </div>
                                        </div>
                                    </div>
                                    <label for="products_pcs_pcs_ct_size" class="form-label">Pcs Size</label>
                                    <div class="form-group row  ">
                                        <div class="col-sm-8">
                                            <div class="input-group">
                                                <span class="input-group-text with-icon"><i class="icon-pencil-alt"></i></span>
                                                <input style="max-width: 160px; text-align: right;" type="text" id="products_pcs_pcs_ct_size" name="pcs_ct_size[0]" value="" class="form-control products_pcs_pcs_ct_size_" placeholder="Input Pcs Size" inputmode="decimal">
                                            </div>
                                        </div>
                                    </div>
                                    <label for="products_pcs_pcs_size_type" class="form-label">Pcs Size Type</label>
                                    <div class="form-group row  ">
                                        <div class="col-sm-8">
                                            <div class="input-group">
                                                <span class="input-group-text with-icon"><i class="icon-pencil-alt"></i></span>
                                                <input type="text" id="products_pcs_pcs_size_type" name="pcs_size_type[0]" value="" class="form-control products_pcs_pcs_size_type_" placeholder="Input Pcs Size Type">
                                            </div>
                                        </div>
                                    </div>
                                    <label for="products_pcs_gia_code" class="form-label">Gia Code</label>
                                    <div class="form-group row  ">
                                        <div class="col-sm-8">
                                            <div class="input-group">
                                                <span class="input-group-text with-icon"><i class="icon-pencil-alt"></i></span>
                                                <input type="text" id="products_pcs_gia_code" name="gia_code[0]" value="" class="form-control products_pcs_gia_code_" placeholder="Input Gia Code">
                                            </div>
                                        </div>
                                    </div>
                                    <label for="products_pcs_gia_url" class="form-label">Gia Url</label>
                                    <div class="form-group row  ">
                                        <div class="col-sm-8">
                                            <div class="input-group">
                                                <span class="input-group-text with-icon"><i class="icon-pencil-alt"></i></span>
                                                <input type="text" id="products_pcs_gia_url" name="gia_url[0]" value="" class="form-control products_pcs_gia_url_" placeholder="Input Gia Url">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group row  ">
                                
                                <div class="col-sm-6">
                                    <button type="button" class="btn btn-outline-info waves-effect waves-light material-shadow-none addNewRow">New</button>
                                </div>
                            </div>
                            
                            <label for="in_stock" class="form-label">In Stock</label>
                            <div class="form-group row  ">
                                <div class="col-sm-8">
                                    <div class="form-check form-switch">
                                        <input type="hidden" name="in_stock" id="in_stock" value="1">
                                        <input class="form-check-input in_stock" name="in_stock_cb" type="checkbox" id="in_stock_cb" checked="" onchange="document.querySelector('#in_stock').value = (this.checked ? '1' : '0')">
                                    </div>
                                </div>
                            </div>
                            <label for="status" class="form-label">Status</label>
                            <div class="form-group row  ">
                                <div class="col-sm-8">
                                    <div class="form-check form-switch">
                                        <input type="hidden" name="status" id="status" value="1">
                                        <input class="form-check-input status" name="status_cb" type="checkbox" id="status_cb" checked="" onchange="document.querySelector('#status').value = (this.checked ? '1' : '0')">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <label for="products_menu_menu_type_id" class="form-label">Menu</label>
                            <div class="form-group row  ">
                                <div class="col-sm-8">
                                    @foreach ($menuType as $menuTypeVal)
                                        <div class="form-check form-check-inline ">
                                            <input type="checkbox" class="form-check-input products_menu_menu_type_id_" id="products_menu_menu_type_id-1" name="products_menu[menu_type_id][]" value="{{$menuTypeVal->id}}" data-value="">
                                            <label class="form-check-label" for="products_menu_menu_type_id-1">{{$menuTypeVal->name}}</label>
                                        </div>
                                    @endforeach
                                </div>
                            </div>

                            <label for="main_menu" class="form-label">Main Menu</label>
                            <div class="form-group row  ">
                                <div class="col-sm-8">
                                    @foreach ($mainMenu as $key => $categoryVal)
                                        <div class="form-check form-check-inline ">
                                            <input type="checkbox" class="form-check-input main_menu" id="main_menu-{{$key}}" name="products_main_menu[main_menu][]" value="{{$categoryVal->id}}" data-value="">
                                            <label class="form-check-label" for="products_category_category_id-1">{{$categoryVal->name}}</label>
                                        </div>
                                    @endforeach
                                </div>
                            </div>

                            <label for="collection" class="form-label">Collection</label>
                            <div class="form-group row  ">
                                <div class="col-sm-8">
                                    @foreach ($collection as $key => $collectionVal)
                                        <div class="form-check form-check-inline ">
                                            <input type="radio" class="form-check-input collection" id="collection-{{$key}}" name="collection" value="{{$collectionVal->id}}" data-value="">
                                            <label class="form-check-label" for="products_category_category_id-1">{{$collectionVal->name}}</label>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                            
                            <label for="category" class="form-label">Category</label>
                            <div class="form-group row  ">
                                <div class="col-sm-8">
                                    @foreach ($category as $categoryVal)
                                        <div class="form-check form-check-inline ">
                                            <input type="radio" class="form-check-input category" id="categories" name="category" value="{{$categoryVal->id}}" data-value="">
                                            <label class="form-check-label" for="category-1">{{$categoryVal->category_name}}</label>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                            <label for="bestselling" class="form-label">Bestselling Products</label>
                            <div class="form-group row  ">
                                <div class="col-sm-8">
                                    <div class="form-check form-switch">
                                        <input type="hidden" name="bestselling" id="bestselling" value="1">
                                        <input class="form-check-input bestselling" name="bestselling_cb" type="checkbox" id="bestselling_cb" checked="" 
                                        onchange="document.querySelector('#bestselling').value = (this.checked ? '1' : '0')">
                                    </div>
                                </div>
                            </div>
                            {{-- <label for="category" class="form-label">Size Guides</label>
                            <div class="form-group row  ">
                                <div class="col-sm-8">
                                    <div class="form-check form-check-inline ">
                                        <select name="" id="">
                                            @foreach ($sizeGuide as $sizeGuideVal)
                                                <option value="{{$sizeGuideVal->id}}">{{$sizeGuideVal->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div> --}}
                        </div>
                    </div>
                    <!-- </div> -->
                    <!-- /.box-body -->

                    {{-- <footer class="navbar form-footer navbar-light bg-white py-3 px-4 shadow fixed-bottom ">
                        <div class="row">
                            @csrf
                        <div class="col-md-2">
                        </div>

                        <div class="col-md-8 d-flex align-items-center ">
                            <div class="flex-grow-1 ">
                                <button type="reset" class="btn btn-warning">Reset</button>
                            </div>
                            <div class="btn-group">
                                <div class="form-check form-check-inline">
                                    <input type="checkbox" class="form-check-input after-submit" id="after-save-continue_editing" name="after-save" value="continue_editing">
                                    <label class="form-check-label" for="after-save-continue_editing">Continue editing</label>
                                </div>
                                                                <div class="form-check form-check-inline">
                                    <input type="checkbox" class="form-check-input after-submit" id="after-save-continue_creating" name="after-save" value="continue_creating">
                                    <label class="form-check-label" for="after-save-continue_creating">Continue creating</label>
                                </div>
                                                                <div class="form-check form-check-inline">
                                    <input type="checkbox" class="form-check-input after-submit" id="after-save-view" name="after-save" value="view">
                                    <label class="form-check-label" for="after-save-view">View</label>
                                </div>
                                </div>
                                <div class="btn-group">
                                    <button type="submit" class="btn btn-primary">Submit</button>
                                </div>
                            </div>
                        </div>
                    </footer> --}}
                    @include('admin.layouts.footer')

                    <!-- /.box-footer -->
                </form>

            </div>
            <!--</div></div>-->
        </section>
    </div>
</main>
{{-- </div> --}}

    
    <button id="totop" title="Go to top" style="display: none;"><i class="icon-chevron-up"></i></button>

    <script>
        function LA() {}
        LA.token = "P4Un2MFwF00hvnVagbMwzuC7bbAr6LDx4vpEuTtA";
        LA.user = {"id":1,"username":"admin","name":"Administrator","avatar":"http:\/\/aramyanbrothers.loc\/vendor\/open-admin\/open-admin\/gfx\/user.svg"};
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        j = 0;
        $(document).on('click', '.addNewRow', function(){
            j++
            const withDivison = $('.multi-row').append(`
            <div class="row-block">
                <div class="row-block">
                    <sapn class="removeRow">
                        <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M13.1641 3.99935H17.3307V5.66602H15.6641V16.4994C15.6641 16.9596 15.291 17.3327 14.8307 17.3327H3.16406C2.70383 17.3327 2.33073 16.9596 2.33073 16.4994V5.66602H0.664062V3.99935H4.83073V1.49935C4.83073 1.03911 5.20383 0.666016 5.66406 0.666016H12.3307C12.791 0.666016 13.1641 1.03911 13.1641 1.49935V3.99935ZM13.9961 5.66602H3.99609V15.666H13.9961V5.66602ZM6.49609 8.16602H8.16276V13.166H6.49609V8.16602ZM9.83203 8.16602H11.4987V13.166H9.83203V8.16602ZM6.49609 2.33268V3.99935H11.4961V2.33268H6.49609Z" fill="#F06548"/>
                        </svg>
                    </sapn>
                    <label for="products_pcs_pcs_img" class="col-sm-2  form-label">Pcs Image</label>
                    <div class="form-group row  ">
                        <div class="col-sm-8">
                            <div class="file-upload-preview-div form-field-helper d-none"><div class="files existing"></div><div class="files new"></div></div><div class="input-group">
                                <input type="file" class="form-control products_pcs_pcs_img_" name="pcs_img[`+j+`]" id="products_pcs_pcs_img">
                                <span class="input-group-btn"></span>
                            </div>
                        </div>
                    </div>
                    <label for="products_pcs_pcs_count" class="col-sm-2  form-label">Pcs Count</label>
                    <div class="form-group row  ">
                        <div class="col-sm-8">
                            <div class="input-group">
                                <span class="input-group-text with-icon"><i class="icon-pencil-alt"></i></span>
                                <input style="max-width: 160px; text-align: right;" type="text" id="products_pcs_pcs_count" name="pcs_count[`+j+`]" value="" class="form-control products_pcs_pcs_count_" placeholder="Input Pcs Count" inputmode="decimal">
                            </div>
                        </div>
                    </div>
                    <label for="products_pcs_pcs_txt" class="col-sm-2  form-label">Pcs Title</label>
                    <div class="form-group row  ">
                        <div class="col-sm-8">
                            <div class="input-group">
                                <span class="input-group-text with-icon"><i class="icon-pencil-alt"></i></span>
                                <input type="text" id="products_pcs_pcs_txt" name="pcs_txt[`+j+`]" value="" class="form-control products_pcs_pcs_txt_" placeholder="Input Pcs Title">
                            </div>
                        </div>
                    </div>
                    <label for="products_pcs_pcs_ct_size" class="col-sm-2  form-label">Pcs Size</label>
                    <div class="form-group row  ">
                        <div class="col-sm-8">
                            <div class="input-group">
                                <span class="input-group-text with-icon"><i class="icon-pencil-alt"></i></span>
                                <input style="max-width: 160px; text-align: right;" type="text" id="products_pcs_pcs_ct_size" name="pcs_ct_size[`+j+`]" value="" class="form-control products_pcs_pcs_ct_size_" placeholder="Input Pcs Size" inputmode="decimal">
                            </div>
                        </div>
                    </div>
                    <label for="products_pcs_pcs_size_type" class="col-sm-2  form-label">Pcs Size Type</label>
                    <div class="form-group row  ">
                        <div class="col-sm-8">
                            <div class="input-group">
                                <span class="input-group-text with-icon"><i class="icon-pencil-alt"></i></span>
                                <input type="text" id="products_pcs_pcs_size_type" name="pcs_size_type[`+j+`]" value="" class="form-control products_pcs_pcs_size_type_" placeholder="Input Pcs Size Type">
                            </div>
                        </div>
                    </div>
                    <label for="products_pcs_gia_code" class="form-label">Gia Code</label>
                    <div class="form-group row  ">
                        <div class="col-sm-8">
                            <div class="input-group">
                                <span class="input-group-text with-icon"><i class="icon-pencil-alt"></i></span>
                                <input type="text" id="products_pcs_gia_code" name="gia_code[`+j+`]" value="" class="form-control products_pcs_gia_code_" placeholder="Input Gia Code">
                            </div>
                        </div>
                    </div>
                    <label for="products_pcs_gia_url" class="form-label">Gia Url</label>
                    <div class="form-group row  ">
                        <div class="col-sm-8">
                            <div class="input-group">
                                <span class="input-group-text with-icon"><i class="icon-pencil-alt"></i></span>
                                <input type="text" id="products_pcs_gia_url" name="gia_url[`+j+`]" value="" class="form-control products_pcs_gia_url_" placeholder="Input Gia Url">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            `)
        })    

        $(document).on('click', '.removeRow', function(){
            $(this).closest('.row-block').remove()
        })
    </script>