@php
        $ad = $ad ?? null;
        $store_id = $store_id ?? null;
        $redirectUrl = $redirectUrl ?? null;
    @endphp

    <style>
        .gap-3 {
            gap: 20px;
        }
    </style>


    <div class="container-fluid">
        <div class="cat-edite-page max-width-box">
            <form action="{{ route('quodrant_ads.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                @if (!empty($redirectUrl))
                    <input type="hidden" name="redirect_url" value="{{ $redirectUrl }}">
                @endif
                <div class="card  pb-4">

                    <div class="card-header">
                        <ul class="nav nav-tabs align-items-end card-header-tabs w-100">
                            <li role="presentation" class="nav-item">
                                <a href="#quodrant_ads_information" aria-controls="description" role="tab"
                                    data-toggle="tab"
                                    class="nav-link active">{{ trans('lang.quodrant_ads_information') }}</a>
                            </li>
                        </ul>
                    </div>

                    <div class="card-body">

                        <div id="data-table_processing" class="dataTables_processing panel panel-default"
                            style="display: none;">
                            {{ trans('lang.processing') }}
                        </div>
                        <div class="error_top" style="display:none"></div>
                        {{--  <div class="error_top" style="display:none; color: red; margin-bottom: 15px;"></div>  --}}

                        @include('alerts.error_messages')
                        <div class="row restaurant_payout_create" role="tabpanel" style="max-width: 100% !important">

                            <div class="restaurant_payout_create-inner tab-content">
                                <div role="tabpanel" class="tab-pane active" id="advertisement_information">
                                    <fieldset>
                                        <legend>{{ trans('lang.quodrant_ads_create') }}</legend>
                                        <div class="form-group row width-100">
                                            <label
                                                class="col-3 control-label">{{ trans('lang.advertisement_title') }}</label>
                                            <div class="col-7">
                                                <input type="text" class="form-control ad-title" name="main_title"
                                                    value="{{ old('main_title') }}">
                                                <div class="form-text text-muted">
                                                    {{ trans('lang.advertisement_title_help') }}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group row width-100">
                                            <label class="col-3 control-label">Quadrant Type</label>
                                            <div class="col-7 d-flex gap-3">
                                                <select id="quodrant_type" name="quadrant_type" class="form-control">
                                                    <option value="">Select Quadrant Type</option>
                                                    @foreach (config('app.quadrant_types') as $type)
                                                        <option value="{{ $type }}"
                                                            {{ old('quadrant_type', $ad->quadrant_type ?? '') == $type ? 'selected' : '' }}>
                                                            {{ $type }}
                                                        </option>
                                                    @endforeach
                                                </select>

                                            </div>
                                        </div>

                                        <div class="form-group row width-100" id="brandBox" style="display:none">
                                            <label class="col-3 control-label">{{ trans('lang.brand') }}</label>
                                            <div class="col-7">
                                                <select class="parent_category form-control" id="brand_id"
                                                    name="brand_id">
                                                    <option value="">{{ trans('lang.select_brand') }}</option>
                                                </select>
                                                <div class="form-text text-muted">
                                                    {{ trans('lang.brand_help') }}
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group row width-50" id="priceRangeBox" style="display:none">
                                            <label class="col-3 control-label">Price Range</label>
                                            <div class="col-7 d-flex gap-3">
                                                <input type="number" name="min_price" id="min_price"
                                                    class="form-control" placeholder="Min Price">
                                                <input type="number" name="max_price" id="max_price"
                                                    class="form-control" placeholder="Max Price">
                                            </div>
                                        </div>

                                        <div class="form-group row width-100">
                                            <label class="col-3 control-label">Text Color</label>
                                            <div class="col-7">
                                                {{--  <input type="color" name="background_color" class="form-control">  --}}
                                                <input type="color" name="text_color" id="text_color"
                                                    value="{{ old('text_color') }}">

                                            </div>
                                        </div>

                                        <div class="form-group row width-100">
                                            <label class="col-3 control-label">Background Type</label>
                                            <div class="col-7 d-flex gap-3">
                                                <select id="background_type" name="background_type"
                                                    class="form-control">
                                                    <option value="">Select Type</option>
                                                    <option value="color">Color</option>
                                                    <option value="image">Image</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group row width-100" id="background_color_div"
                                            style="display:none;">
                                            <label class="col-3 control-label">Select Color</label>
                                            <div class="col-7">
                                                {{--  <input type="color" name="background_color" class="form-control">  --}}
                                                <input type="hidden" name="background_color" id="background_color"
                                                    value="{{ old('background_color') }}">


                                                <div>
                                                    <input type="color" id="color1" value="#ff0000">
                                                    <input type="color" id="color2" value="#0000ff">

                                                    <select id="direction">
                                                        <option value="to right">Left → Right</option>
                                                        <option value="to bottom" selected>Top → Bottom</option>
                                                        <option value="45deg">45°</option>
                                                    </select>

                                                    <div id="gradientPreview"
                                                        style="width:200px;height:50px;border:1px solid #ccc;">
                                                    </div>
                                                </div>

                                            </div>
                                        </div>




                                        <div class="form-group row width-100" id="background_image_div"
                                            style="display:none;">
                                            <label class="col-3 control-label">Upload Image</label>
                                            <div class="col-7">
                                                <input type="file" name="background_image" class="form-control">
                                            </div>
                                        </div>
                                        <input type="hidden" name="store_id" id="store_id"
                                            value="{{ old('store_id', $store_id ?? '') }}">


                                        {{--  <div class="form-group row width-100">
                                            <label class="col-3 control-label ">{{ trans('lang.store') }}</label>
                                            <div class="col-7">
                                                <select rows="7" class="store_id form-control" id="store_id"
                                                    name="store_id">
                                                    <option value="">{{ trans('lang.select_store') }}
                                                    </option>
                                                    @foreach ($stores as $store)
                                                        <option value="{{ $store->id }}"
                                                            {{ $store->id == old('store_id', $store_id ?? '') ? 'selected' : '' }}>
                                                            {{ $store->name }}
                                                        </option>
                                                    @endforeach
                                                </select>

                                            </div>
                                        </div>  --}}
                                        <div class="form-group row width-100">
                                            <label class="col-3 control-label ">{{ trans('lang.category') }}</label>
                                            <div class="col-7">
                                                <select rows="7" class="category_id form-control"
                                                    id="category_id" name="category_id">
                                                    <option value="">{{ trans('lang.select_category') }}
                                                    </option>
                                                    @foreach ($categories as $category)
                                                        @php
                                                            $selected = '';
                                                            if ($category->id == old('category_id')) {
                                                                $selected = 'selected';
                                                            }
                                                        @endphp
                                                        <option value="{{ $category->id }}" {{ $selected }}>
                                                            {{ $category->name }}
                                                        </option>
                                                    @endforeach
                                                </select>

                                            </div>
                                        </div>
                                        <div class="form-group row width-100">
                                            <label
                                                class="col-3 control-label ">{{ trans('lang.sub_category') }}</label>
                                            <div class="col-7">
                                                <select rows="7" class="sub_category form-control"
                                                    id="sub_category_id" name="sub_category_id">
                                                    <option value="">{{ trans('lang.select_sub_category') }}
                                                    </option>

                                                </select>

                                            </div>
                                        </div>
                                        <div class="form-group row width-100 col-12">

                                            <label class="col-3 control-label d-block ">
                                                {{ trans('lang.quodrant_ads_image_type') }}
                                            </label>

                                            <div class="d-flex align-items-center gap-4">

                                                <div class="form-check d-flex align-items-center gap-2 mb-0">
                                                    <input type="radio" class="form-check-input image_type"
                                                        name="image_type" value="one" id="image_one"
                                                        {{ old('image_type') == 'one' ? 'checked' : '' }}>
                                                    <label class="control-label mb-0" for="image_one">One
                                                        Product</label>
                                                </div>

                                                <div class="form-check d-flex align-items-center gap-2 mb-0">
                                                    <input type="radio" class="form-check-input image_type"
                                                        name="image_type" value="two" id="image_two"
                                                        {{ old('image_type') == 'two' ? 'checked' : '' }}>
                                                    <label class="control-label mb-0" for="image_two">Two
                                                        Products</label>
                                                </div>

                                                <div class="form-check d-flex align-items-center gap-2 mb-0">
                                                    <input type="radio" class="form-check-input image_type"
                                                        name="image_type" value="three" id="image_three"
                                                        {{ old('image_type') == 'three' ? 'checked' : '' }}>
                                                    <label class="control-label mb-0" for="image_three">Three
                                                        Products</label>
                                                </div>

                                                <div class="form-check d-flex align-items-center gap-2 mb-0">
                                                    <input type="radio" class="form-check-input image_type"
                                                        name="image_type" value="four" id="image_four"
                                                        {{ old('image_type') == 'four' ? 'checked' : '' }}>
                                                    <label class="control-label mb-0" for="image_four">Four
                                                        Products</label>
                                                </div>

                                            </div>

                                        </div>


                                        {{-- ONE PRODUCT FORM --}}
                                        <div class="form-group form-check row width-100" id="oneProductForm"
                                            style="display:none;">
                                            <div class="col-7">
                                                <h4>Single Product</h4>

                                                <table class="table table-bordered col-7">
                                                    <thead>
                                                        <tr>
                                                            <th style="width: 25%">Select Product</th>
                                                            <th style="width: 20%">Image</th>
                                                            <th style="width: 25%">Title</th>
                                                            <th style="width: 15%">Old Price</th>
                                                            <th style="width: 15%">New Price</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr>
                                                            <td>
                                                                <select class="product-select form-control"
                                                                    name="product_id">
                                                                    <option value="">
                                                                        {{ trans('lang.select_product') }}</option>
                                                                </select>

                                                            </td>
                                                            <td>
                                                                <input type="file" name="product_image"
                                                                    class="form-control">
                                                            </td>
                                                            <td>
                                                                <input type="text" name="title"
                                                                    class="form-control">
                                                            </td>
                                                            <td>
                                                                <input type="text" name="price"
                                                                    class="form-control" readonly>
                                                            </td>
                                                            <td>
                                                                <input type="text" name="new_price"
                                                                    class="form-control">
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>


                                        {{-- Two PRODUCT FORM --}}
                                        <div class="form-group row width-100" id="twoProductForm"
                                            style="display:none;">
                                            <div class="col-12">

                                                <h4 class="mb-3">Two Products</h4>

                                                <div class="table-responsive">
                                                    <table class="table table-bordered align-middle">
                                                        <thead class="table-light">
                                                            <tr>
                                                                <th style="width: 25%">Select Product</th>
                                                                <th style="width: 20%">Image</th>
                                                                <th style="width: 25%">Title</th>
                                                                <th style="width: 15%">Old Price</th>
                                                                <th style="width: 15%">New Price</th>
                                                            </tr>
                                                        </thead>

                                                        <tbody>
                                                            @for ($i = 0; $i < 2; $i++)
                                                                <tr>
                                                                    <td>
                                                                        <select class="product-select form-control"
                                                                            name="">
                                                                            <option value="">
                                                                                {{ trans('lang.select_product') }}
                                                                            </option>
                                                                        </select>
                                                                        <input type="hidden"
                                                                            name="products[{{ $i }}][product_id]"
                                                                            class="hidden-product-id">

                                                                    </td>

                                                                    <td>
                                                                        <input type="file"
                                                                            name="products[{{ $i }}][product_image]"
                                                                            class="form-control"
                                                                            placeholder="product_image">
                                                                    </td>

                                                                    <td>
                                                                        <input type="text"
                                                                            name="products[{{ $i }}][title]"
                                                                            class="form-control"
                                                                            placeholder="Product Title">
                                                                    </td>

                                                                    <td>
                                                                        <input type="text"
                                                                            name="products[{{ $i }}][price]"
                                                                            class="form-control" placeholder="0.00"
                                                                            readonly>
                                                                    </td>
                                                                    <td>
                                                                        <input type="text"
                                                                            name="products[{{ $i }}][new_price]"
                                                                            class="form-control" placeholder="0.00">
                                                                    </td>
                                                                </tr>
                                                            @endfor
                                                        </tbody>
                                                    </table>
                                                </div>

                                            </div>
                                        </div>


                                        {{-- Three PRODUCT FORM --}}
                                        <div class="form-group row width-100" id="threeProductForm"
                                            style="display:none;">
                                            <div class="col-12">

                                                <h4 class="mb-3">Three Products</h4>

                                                <div class="table-responsive">
                                                    <table class="table table-bordered align-middle">
                                                        <thead class="table-light">
                                                            <tr>
                                                                <th style="width: 25%">Select Product</th>
                                                                <th style="width: 20%">Image</th>
                                                                <th style="width: 25%">Title</th>
                                                                <th style="width: 15%">Old Price</th>
                                                                <th style="width: 15%">New Price</th>
                                                            </tr>
                                                        </thead>

                                                        <tbody>
                                                            @for ($i = 0; $i < 3; $i++)
                                                                <tr>
                                                                    <td>
                                                                        <select class="product-select form-control">
                                                                            <option value="">
                                                                                {{ trans('lang.select_product') }}
                                                                            </option>
                                                                        </select>
                                                                        <input type="hidden"
                                                                            name="products[{{ $i }}][product_id]"
                                                                            class="hidden-product-id">

                                                                    </td>

                                                                    <td>
                                                                        <input type="file"
                                                                            name="products[{{ $i }}][product_image]"
                                                                            class="form-control"
                                                                            placeholder="product_image">
                                                                    </td>

                                                                    <td>
                                                                        <input type="text"
                                                                            name="products[{{ $i }}][title]"
                                                                            class="form-control"
                                                                            placeholder="Product Title">
                                                                    </td>

                                                                    <td>
                                                                        <input type="text"
                                                                            name="products[{{ $i }}][price]"
                                                                            class="form-control" placeholder="0.00"
                                                                            readonly>
                                                                    </td>
                                                                    <td>
                                                                        <input type="text"
                                                                            name="products[{{ $i }}][new_price]"
                                                                            class="form-control" placeholder="0.00">
                                                                    </td>
                                                                </tr>
                                                            @endfor
                                                        </tbody>
                                                    </table>
                                                </div>

                                            </div>
                                        </div>


                                        {{-- FOUR PRODUCT FORM --}}
                                        <div class="form-group row width-100" id="fourProductForm"
                                            style="display:none;">
                                            <div class="col-12">

                                                <h4 class="mb-3">Four Products</h4>

                                                <div class="table-responsive">
                                                    <table class="table table-bordered align-middle">
                                                        <thead class="table-light">
                                                            <tr>
                                                                <th style="width: 25%">Select Product</th>
                                                                <th style="width: 20%">Image</th>
                                                                <th style="width: 25%">Title</th>
                                                                <th style="width: 15%">Old Price</th>
                                                                <th style="width: 15%">New Price</th>
                                                            </tr>
                                                        </thead>

                                                        <tbody>
                                                            @for ($i = 0; $i < 4; $i++)
                                                                <tr>
                                                                    <td>
                                                                        <select class="product-select form-control"
                                                                            name="">
                                                                            <option value="">
                                                                                {{ trans('lang.select_product') }}
                                                                            </option>
                                                                        </select>
                                                                        <input type="hidden"
                                                                            name="products[{{ $i }}][product_id]"
                                                                            class="hidden-product-id">

                                                                    </td>

                                                                    <td>
                                                                        <input type="file"
                                                                            name="products[{{ $i }}][product_image]"
                                                                            class="form-control"
                                                                            placeholder="product_image">
                                                                    </td>

                                                                    <td>
                                                                        <input type="text"
                                                                            name="products[{{ $i }}][title]"
                                                                            class="form-control"
                                                                            placeholder="Product Title">
                                                                    </td>

                                                                    <td>
                                                                        <input type="text"
                                                                            name="products[{{ $i }}][price]"
                                                                            class="form-control" placeholder="0.00"
                                                                            readonly>
                                                                    </td>
                                                                    <td>
                                                                        <input type="text"
                                                                            name="products[{{ $i }}][new_price]"
                                                                            class="form-control" placeholder="0.00">
                                                                    </td>
                                                                </tr>
                                                            @endfor
                                                        </tbody>
                                                    </table>
                                                </div>

                                            </div>
                                        </div>





                                        <div class="form-group row width-100">
                                            <label
                                                class="col-3 control-label">{{ trans('lang.quodrant_ads_publish_date') }}</label>
                                            <div class="col-7">
                                                <input type="date" class="form-control ad-title"
                                                    name="publish_date">

                                            </div>
                                        </div>
                                        <div class="form-check row width-100">
                                            <input type="checkbox" class="is_active" name="is_active" value="1"
                                                id="is_active_qc" {{ old('is_active') == '1' ? 'checked' : '' }}>
                                            <label class="col-3 control-label"
                                                for="is_active_qc">{{ trans('lang.is_active') }}</label>
                                        </div>
                                        <div class="form-check row width-100 mb-3">
                                            <input type="checkbox" name="is_for_bookit" value="1"
                                                id="is_for_bookit" {{ old('is_for_bookit') == '1' ? 'checked' : '' }}>
                                            <label class="col-3 control-label"
                                                for="is_for_bookit">{{ trans('lang.is_for_bookit') }}</label>
                                            <div class="col-7">
                                                <small>{{ trans('lang.is_for_bookit_desc') }}</small>
                                            </div>
                                        </div>
                                        <div class="form-check row width-100">
                                            <input type="checkbox" class="is_home_page" name="is_home_page"
                                                value="1" id="is_home_page"
                                                {{ old('is_home_page') == '1' ? 'checked' : '' }}>
                                            <label class="col-3 control-label" for="is_home_page">Is Home
                                                Page?</label>
                                        </div>
                                        <div class="form-check row width-100">
                                            <input type="checkbox" class="is_discover_page" name="is_discover_page"
                                                value="1" id="is_discover_page"
                                                {{ old('is_discover_page') == '1' ? 'checked' : '' }}>
                                            <label class="col-3 control-label" for="is_discover_page">Is Discover
                                                Page?</label>
                                        </div>
                                        <div class="form-check row width-100">
                                            <input type="checkbox" class="is_shop_page" name="is_shop_page"
                                                value="1" id="is_shop_page"
                                                {{ old('is_shop_page') == '1' ? 'checked' : '' }}>
                                            <label class="col-3 control-label" for="is_shop_page">Is Shop
                                                Page?</label>
                                        </div>
                                        <div class="form-check row width-100">
                                            <input type="checkbox" class="is_price_display" name="is_price_display"
                                                value="1" id="is_price_display"
                                                {{ old('is_price_display') == '1' ? 'checked' : '' }}>
                                            <label class="col-3 control-label" for="is_price_display">Is Price
                                                Display?</label>
                                        </div>
                                    </fieldset>
                                </div>

                                <div role="tabpanel" class="tab-pane" id="review_attributes">

                                </div>
                            </div>

                        </div>

                    </div>

                    <div class="form-group col-12 text-center btm-btn">
                        <button type="submit" class="btn btn-primary save_category_btn"><i class="fa fa-save"></i>
                            {{ trans('lang.save') }}
                        </button>
                        @if (!empty($redirectUrl))
                            <a href="{{ $redirectUrl }}" class="btn btn-default"><i
                                    class="fa fa-undo"></i>{{ trans('lang.cancel') }}</a>
                        @else
                            <a href="{!! url(url()->previous()) !!}" class="btn btn-default"><i
                                    class="fa fa-undo"></i>{{ trans('lang.cancel') }}</a>
                        @endif
                    </div>

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