@extends('layouts.app')



@section('content')

    <div class="col-lg-8 ">
        <div class="panel panel-primary">
            <div class="panel-heading" style="padding: 10px 15px !important;">Add Banner</div>
            <div class="panel-body">

                @if(session()->has('success'))
                    <div class="alert alert-success" role="alert">
                        <strong>Success !</strong> {{ session('success') }}
                    </div>
                @endif
                <form action="{{ route('october.seller.banner.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="row">
                        <div class="form-group">
                            <label for="banner">Choose File</label>
                            <input type="file" name="banner" id="banner" class="form-control">
                            @error('banner')
                            <small class="form-text text-danger"> {{ $message }}</small>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="seller">Sellers</label>
                            <select name="seller" id="seller" class="form-control">
                                <option value="" style="display: none">Select Seller</option>
                                @foreach($sellers as $seller)
                                    <option value="{{ $seller->id }}">{{ $seller->name }}</option>
                                @endforeach
                            </select>
                            @error('seller')
                            <small class="form-text text-danger"> {{ $message }}</small>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="category">Choose Category</label>
                            <select name="category" id="category" class="form-control"
                                    onchange="getSubCategories(this);">
                                <option value="" style="display: none">Select Category</option>
                                @foreach($saleProductCategories as $saleProductCategory)
                                    <option
                                        value="{{ $saleProductCategory->id }}">{{ $saleProductCategory->name }}</option>
                                @endforeach
                            </select>
                            @error('category')
                            <small class="form-text text-danger"> {{ $message }}</small>
                            @enderror
                        </div>
                        <div class="form-group hidden">
                            <label for="subcategory">Choose Sub Category(s)</label>
                            <select name="sub_categories[]" id="subcategory" class="form-control select" multiple>
                            </select>
                            @error('sub_categories')
                            <small class="form-text text-danger"> {{ $message }}</small>
                            @enderror
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary">Add Banner</button>
                </form>
            </div>
        </div>
    </div>

@endsection

@section('script')
    <script>
        $('#subcategory').select2({
            placeholder : 'select subcategories'
        });
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        function getSubCategories(obj) {
            let categoryId = obj.value;
            $.post({
                url: '{{ route('october.subcategories') }}',
                data: {'category': categoryId},
                success: function (response) {
                    if (response) {
                        $('#subcategory').parent('div.form-group').removeClass('hidden').addClass('show');
                        $('#subcategory').html(response);
                    } else {
                        $('#subcategory').parent('div.form-group').removeClass('show').addClass('hidden');
                    }
                    console.log(response);
                }
            })
        }
    </script>
@endsection