@extends('dashboard::layouts.layout')

@push('header')
    <div class="header bg-primary pb-6">
        <div class="container-fluid">
            <div class="header-body">
                <div class="row align-items-center py-4">
                    <div class="col-lg-6 col-7">
                        <x-dashboard.breadcrumb-component>
                            <li class="breadcrumb-item active" aria-current="page"><a href="{{route('dashboard.package.index')}}">@lang('main.package')</a></li>
                            <li class="breadcrumb-item active" aria-current="page">@isset ($edit) @lang('main.edit') @else @lang('main.create') @endisset</li>
                        </x-dashboard.breadcrumb-component>
                    </div>
                    <div class="col-lg-6 col-5 text-right">
                        <a href="{{route('dashboard.package.create')}}" class="btn btn-sm btn-neutral">{{isset($edit) ?  __('main.update') : __('main.create')}}</a>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <style>
        .btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show > .btn-secondary.dropdown-toggle{
            background-color: var(--primary);
            border-color: var(--primary);
            color:var(--white);
            border-radius: 0;
            margin-bottom: 2px;
        }
        .delete-checkbox .custom-control-input:checked ~ .custom-control-label *{
            color: red;
            fill: red;
        }
    </style>
@endpush
@section('content')
    <div class="row">
        <div class="col-xl-12">
            <div class="card">
                <div class="card-header bg-transparent">
                    <div class="row align-items-center">
                        <div class="col">
                            <h6 class="text-uppercase text-muted ls-1 mb-1">@lang('main.package') {{$package->id ?? ''}}</h6>
                            <h5 class="h3 mb-0">@lang('main.packages')</h5>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li class="alert alert-danger alert-dismissible fade show" role="alert">
                                <span class="alert-icon"><i class="fa fa-exclamation"></i></span>
                                <span class="alert-text">{!! $error !!}</span>
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </li>
                        @endforeach
                    </ul>
                    @isset($package)
                        <div class="nav-wrapper">
                            <ul class="nav nav-pills nav-fill flex-column flex-md-row" id="tabs-icons-text" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link mb-sm-3 mb-md-0  {{in_array($tab,['package']) ?  ' active ':''}}" id="tabs-package-text-1-tab"  href="{{isset($edit) ? route('dashboard.package.edit',['package'=>$package,'tab'=>'package']):url()->current()}}"  aria-selected=" {{in_array($tab,['package']) ?  'true':'false'}}"><i class="ni ni-cloud-upload-96 mr-2"></i>@lang('main.packages_details')</a>
                                </li>
                                @isset($edit)
                                    <li class="nav-item">
                                        <a class="nav-link mb-sm-3 mb-md-0  {{in_array($tab,['products']) ?  ' active ':''}}" id="tabs-images-text-2-tab"  href="{{route('dashboard.package.edit',['package'=>$package,'tab'=>'products'])}}"  aria-selected=" {{in_array($tab,['products']) ?  'true':'false'}}"><i class="ni ni-bell-55 mr-2"></i>@lang('main.products')</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link mb-sm-3 mb-md-0  {{in_array($tab,['seo']) ?  ' active ':''}}" id="tabs-seo-text-3-tab"  href="{{route('dashboard.package.edit',['package'=>$package,'tab'=>'seo'])}}"  aria-selected=" {{in_array($tab,['seo']) ?  'true':'false'}}"><i class="ni ni-calendar-grid-58 mr-2"></i>@lang('main.seo')</a>
                                    </li>
                                @endisset
                            </ul>
                        </div>

                        <div class="card shadow">
                            <div class="card-body">
                                <div class="tab-content" id="myTabContent">
                                    <div class="tab-pane {{in_array($tab,['package']) ?  ' fade show active ':''}}" id="tabs-package-text-1" role="tabpanel" aria-labelledby="tabs-package-text-1-tab">
                                        <x-share.form :type="isset($edit)?'update':''" :route="isset($edit) ? route('dashboard.package.update',['package'=>$package]) :route('dashboard.package.store')" class="row" :file="true">
                                            <div class="col-md-6 d-none">
                                                <x-share.form-input name="id" required="required" :placeholder="__('main.id')" :value="old('id',$package->id)" type="text" min="3"/>
                                            </div>
                                            <div class="col-md-6">
                                                <x-share.form-input name="name" required="required" :placeholder="__('main.package')" :value="old('name',$package->name)" type="text" min="3"/>
                                            </div>
                                            <div class="col-md-6">
                                                <x-share.form-input name="qty" required="required" :placeholder="__('main.qty')" :value="old('qty',$package->qty)" type="number" min="1"/>
                                            </div>

                                            <div class="col-md-6">
                                                <x-share.form-input name="price" step="any" required="required" :placeholder="__('main.price')" :value="old('price',$package->price)" type="number" min="1"/>
                                            </div>

                                            <div class="col-md-6">
                                                <x-share.form-input name="old_price"  step="any" required="required" :placeholder="__('main.old_price')" :value="old('old_price',$package->old_price)" type="number" min="1"/>
                                            </div>

                                            <div class="col-md-6">
                                                <x-share.form-input name="currency" disabled :placeholder="__('main.currency')" :value="old('currency',$package->currency)" type="text" min="3"/>
                                            </div>

{{--                                            <div class="col-md-6">--}}
{{--                                                <x-share.form-input name="package_type" :label="__('main.star')" required  :placeholder="__('main.star')" type="select">--}}
{{--                                                    <option value="1" {{old('package_type')==$package->package_type ? ' selected ':''}}>true</option>--}}
{{--                                                    <option value="0" {{old('package_type')==$package->package_type ? ' selected ':''}}>false</option>--}}
{{--                                                </x-share.form-input>--}}
{{--                                            </div>--}}

                                            <div class="col-md-6">
                                                <x-share.form-input name="image" :placeholder="__('main.image')" type="file" min="3"  :imagePath="asset($package->image)"/>
                                            </div>

                                            <div class="col-md-12 mb-4">
                                                <h3>@lang('main.active')</h3>
                                                <label class="custom-toggle">
                                                    <input type="checkbox" {{$package->active ? ' checked ' :''}} value="1" name="active">
                                                    <span class="custom-toggle-slider rounded-circle" data-label-off="@lang('main.no')"
                                                          data-label-on="@lang('main.yes')"></span>
                                                </label>
                                                <x-share.error-message name="active"/>
                                            </div>



{{--                                            <div class="col-md-12 mx-auto my-4">--}}
{{--                                                <h3>@lang('main.active')</h3>--}}
{{--                                                <label class="custom-toggle">--}}
{{--                                                <label class="custom-toggle">--}}
{{--                                                    <input type="checkbox" {{$package->active ? ' checked ' :''}} value="1" name="active">--}}
{{--                                                    <span class="custom-toggle-slider rounded-circle" data-label-off="@lang('main.no')"--}}
{{--                                                          data-label-on="@lang('main.yes')"></span>--}}
{{--                                                </label>--}}
{{--                                                <x-share.error-message name="active"/>--}}
{{--                                            </div>--}}

                                            <div class="col-md-12">
                                                <button type="submit" class="btn btn-{{isset($edit) ?  'warning' : 'primary'}}">{{isset($edit) ?  __('main.update') : __('main.next') }}</button>
                                            </div>
                                        </x-share.form>
                                    </div>
                                    @isset($edit)
                                        <div class="tab-pane fade  {{in_array($tab,['products']) ?  ' fade show active ':''}}" id="tabs-images-text-2" role="tabpanel" aria-labelledby="tabs-images-text-2-tab">
                                            <div class="row">
                                                <div class="col-md-9">
                                                    <x-share.form :route="route('dashboard.packageItem.updateAll')">
                                                        <div class="row">
                                                            @foreach ($package->items()->with('product')->get() as $item)
                                                                <div class="col-sm-12 border-bottom p-2">
                                                                    <div class="row">
                                                                        <div class="col-sm-12 col-md-3">
                                                                            <img height="100" src="{{$item->product->image_path}}" alt="" class="w-100">
                                                                            <div>
                                                                                <small>
                                                                                    {{$item->product->name}}
                                                                                </small>
                                                                            </div>
                                                                        </div>
                                                                        <div class="col-sm-12 col-md-3">
                                                                            <x-share.form-input :name="'items['.$item->id.'][qty]'" :label="__('main.qty')" :value="$item->colors &&$item->sizes?$item->qty:0" min="0" :max="$item->colors &&$item->sizes ?$item->product->product_list[$item->colors][$item->sizes]:0" type="number"  :disabled="!$item->colors" />
                                                                        </div>
                                                                        <div class="col-sm-12 col-md-3">
                                                                            <x-share.form-input type="select" :name="'items['.$item->id.'][colors]'" :label="__('main.colors')">
                                                                                @foreach ($item->product->product_list as $name => $color)
                                                                                    <option value="{{$name}}" {{$name ==$item->colors?'selected':''}}>{{$name}}</option>
                                                                                @endforeach
                                                                            </x-share.form-input>
                                                                        </div>
                                                                        <div class="col-sm-12 col-md-3">
                                                                            <x-share.form-input type="select" :name="'items['.$item->id.'][sizes]'" :label="__('main.sizes')" :disabled="!$item->colors">
                                                                                @foreach ($item->product->product_list[$item->colors]??[] as $name => $size)
                                                                                    <option value="{{$name}}" {{$name ==$item->sizes?'selected':''}}>{{$name}}</option>
                                                                                @endforeach
                                                                            </x-share.form-input>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            @endforeach
                                                            <div class="col-sm-12 p-2">
                                                                <button class="btn btn-sm btn-primary">@lang('main.update')</button>
                                                            </div>
                                                        </div>
                                                    </x-share.form>
                                                </div>

                                                <div class="col-sm-12 col-md-3">
                                                    <div class="card">
                                                        <div class="card-body">
                                                            <x-share.form :route="route('dashboard.packageItem.store',['package'=>$package])">
                                                                <input type="hidden" name="product_type" value="{{\App\Models\Product::class}}"/>
                                                                <x-share.form-input  type="select" name="product_id">
                                                                    @foreach (\App\Models\Product::active()->get() as $product)
                                                                        <option value="{{$product->id}}">{{$product->name}}</option>
                                                                    @endforeach
                                                                </x-share.form-input>
                                                                <button class="btn btn-sm btn-success">@lang('main.add')</button>
                                                            </x-share.form>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>


                                        </div>
                                        <div class="tab-pane fade  {{in_array($tab,['seo']) ?  ' fade show active ':''}}" id="tabs-seo-text-3" role="tabpanel" aria-labelledby="tabs-seo-text-3-tab">
                                            <x-seo-seo-model :model="$package" namePrefix="dashboard"/>
                                        </div>
                                    @endisset
                                </div>
                            </div>
                        </div>



                    @endisset
                </div>
            </div>
        </div>
    </div>
@stop

@push('js')
    <script>
        function readURLComponent(input,id) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function(e) {
                    document.querySelector('#'+id).setAttribute('src', e.target.result);
                }

                reader.readAsDataURL(input.files[0]); // convert to base64 string
            }
        }
    </script>
@endpush