@include('Admin.Includes.header')
@php
    use Illuminate\Support\Facades\Auth;
    $logged_in_user = Auth::user();
@endphp

<style>
    .back_image_icon {
        /* background-image: url("categories/preview_thumbnail_image.png"); */
        background-image: url("http://127.0.0.1:8000/products/1684133865.jpeg");
        background-size: 27px;
        background-position: center;
        background-repeat: no-repeat;
        height: 40px;
        width: 40px;
    }

    .img_border {
        height: 40px;
        width: 40px;
        border: 2px solid gainsboro;
        border-radius: 8px;
    }

    .show_data {
        display: flex;
    }
</style>
<!-- Page Inner Start -->
<!--================================-->
<div class="page-inner">
    <!--================================-->
    <!-- Breadcrumb Start -->
    <!--================================-->
    <div class="pageheader pd-t-25 pd-b-35">
        <div class="d-flex justify-content-between">
            <div class="clearfix">
                <div class="pd-t-5 pd-b-5">
                    <h1 class="pd-0 mg-0 tx-20 tx-dark">{{ __('Create Collection') }}</h1>
                </div>
                <div class="breadcrumb pd-0 mg-0">
                    <a class="breadcrumb-item" href="{{ url('/') }}/admin"><i class="icon ion-ios-home-outline"></i>
                        Dashboard</a>
                    <a class="breadcrumb-item" href="{{ url('/') }}/admin/collections">Collection</a>
                    <span class="breadcrumb-item active">Create</span>
                </div>
            </div>

            <div class="d-flex align-items-center">
               @if (Session::has('permissions') && in_array('Collection List', Session::get('permissions')))
                <button type="button" onclick="window.location = '{{ url('/') }}/admin/collections'"
                    class="btn btn-default mb-2 mb-md-0 d-none d-lg-block pd-t-6-force pd-b-5-force">
                    <i data-feather="briefcase" class="wd-16 mr-2"></i>Collection List</button>
               @endif
               @if (Session::has('permissions') && in_array('Collection Trash List', Session::get('permissions')))
                <button type="button" onclick="window.location = '{{ url('/') }}/admin/collections/list/trash'"
                    class="btn btn-default mb-2 mb-md-0 d-none d-lg-block pd-t-6-force pd-b-5-force">
                    <i data-feather="briefcase" class="wd-16 mr-2"></i>Trash List</button>
            @endif
            </div>

        </div>
    </div>
    <!--/ Breadcrumb End -->
    <!--================================-->
    <!--================================-->
    <div class="col-md-12 col-lg-12 px-0">

        @if (session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        <form id="Brands-create-form" method="POST" action="{{ route('collections.store') }}"
            enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="created_by" value="{{ $logged_in_user->id }}">
            <div class="row">
                <div class="col-md-9">
                    <div class="card mg-b-30">
                        <div class="card-header">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="card-header-title tx-13 mb-0">{{ __('Collection Details (Compulsory)') }}
                                    </h6>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="form-group">
                                <label class="form-control-label active">Title: <span class="tx-danger">*</span></label>
                                <input class="form-control form-control-lg  addTitle" type="text" name="title"
                                    placeholder="HITACHI" value="{{ old('title') }}" required>
                            </div>
                            <div class="form-group">
                                <label class="form-control-label active">Permalink: <span
                                        class="tx-danger">*</span></label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span
                                            class="input-group-text input-group-text">{{ url('/') }}/collections/</span>
                                    </div>
                                    <input class="form-control form-control restrict-input-alphabets permalink"
                                        id="permalink" type="text" name="permalink" value="{{ old('permalink') }}"
                                        placeholder="hitachi" required>
                                </div>
                                <div class="text-danger permalink_error"></div>
                                <input type="hidden" class="permalink_status" name="permalink_status"
                                    value="{{ old('permalink_status') }}" required>
                            </div>
                            <div class="form-group">
                                <label class="form-control-label active">Description: </label>
                                <textarea class="form-control form-control-lg  adddescription" name="description" placeholder="HITACHI">{{ old('description') }}</textarea>
                            </div>
                        </div>
                    </div>
                    <div class="card mg-b-30">
                        <div class="card-header">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="card-header-title tx-13 mb-0">{{ __('SEO Details (Optional)') }}</h6>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="form-group">
                                <label class="form-control-label active">SEO Title: </label>
                                <input type="text" class="form-control" name="_seo_title"
                                    value="{{ old('_seo_title') }}" placeholder="SEO Title...">
                            </div>
                            <div class="form-group">
                                <label class="form-control-label active">SEO Tags: </label>
                                <input type="text" name="_seo_tags" value="{{ old('_seo_tags') }}"
                                    class="form-control rounded-0" id="seo_tags">
                            </div>
                            <div class="form-group">
                                <label class="form-control-label active">SEO Description: </label>
                                <textarea class="form-control" name="_seo_description" placeholder="SEO Description...">{{ old('_seo_description') }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card mg-b-30">
                        <div class="card-header">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="card-header-title tx-13 mb-0">{{ __('More Details (Required)') }}</h6>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="form-group">
                                <label class="form-control-label active">Active Status: </label>
                                <select class="form-control" name="active">
                                    <option value="0" @if (old('active') == 0) selected @endif>Draft
                                    </option>
                                    <option value="1" @if (old('active') == 1) selected @endif>Public
                                    </option>
                                    <option value="2" @if (old('active') == 2) selected @endif>Private
                                    </option>
                                    <option value="3" @if (old('active') == 3) selected @endif>Trash
                                    </option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="form-control-label active">Select Discount (Optional): </label>
                                <select class="form-control" name="discount_id">
                                    <option value="0" selected disabled>Select Discount On Collection</option>
                                    @foreach ($discounts as $discount)
                                        <option value="{{ $discount->id }}"
                                            @if (old('discount_id') == $discount->id) selected @endif>{{ $discount->title }}
                                        </option>
                                    @endforeach
                                    <option value="0">General Collection</option>
                                </select>
                            </div>
                            <input class="btn btn-primary float-right" type="submit" value="Submit">
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <!--/  Order Active dataTable End -->
    <!--================================-->
</div>
<!--/ Page Inner End -->

<!--Product Model End  -->
@include('Admin.Includes.footer')
<script>
    $('.addTitle').on('input', function() {
        var title = $(this).val();
        var sku = title.replace(/\s+/g, '-').toLowerCase();
        $('.permalink').val(sku);
        validate_permalink();
    });
    $('.permalink').on('input', function() {
        validate_permalink();
    });
    $('#seo_tags').tagsinput({
        tagClass: 'badge badge-dark'
    });

    // JavaScript code for the search function
    $(document).on('input', '#search_products', function() {
        var searchTerm = $(this).val().toLowerCase();
        var matchingRecords = 0;

        $('#product_list li').each(function() {
            var listItemText = $(this).find('span.serch_data').text().toLowerCase();

            if (searchTerm === '' || listItemText.includes(searchTerm)) {
                $(this).css('display', 'flex');
                matchingRecords++;
            } else {
                $(this).css('display', 'none');
            }
        });

        // Show/hide the "No matching records found" message based on the search results
        if (matchingRecords === 0 && searchTerm !== '') {
            $('.search-message').show();
        } else {
            $('.search-message').hide();
        }
    });
</script>