@extends('layouts.app')

@section('content')
    <div class="page">
        <div class="page-wrapper">
            <!-- Page header -->
            <div class="page-header d-print-none">
                <div class="container-xl">
                    <div class="row g-2 align-items-center">
                        <div class="col">
                            <h2 class="page-title">
                                App Home Screen
                            </h2>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Page body -->
            <div class="page-body">
                <div class="container-xl">
                    <div class="row row-cards">
                        <div class="col-12">
                            <form class="card" id="appHomeScreen-form" method="POST" action="{{ $action_url }}"
                                  enctype="multipart/form-data">
                                {{ csrf_field() }}

                                <div class="card-body">
                                    <div class="row row-cards">
                                        <div class="card col-12">
                                            <div class="card-header">
                                                <h3 class="card-title">Banner Section</h3>
                                            </div>
                                            <div class="card-body">
                                                <div class="row">
                                                    <div class="col-md-6 col-sm-6">
                                                        <div class="mb-3">
                                                            <label class="form-label">Heading</label>
                                                            <input type="text" class="form-control"
                                                                   name="banner_heading"
                                                                   placeholder="Enter Heading"
                                                                   value="">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6 col-sm-6">
                                                        <div class="mb-3">
                                                            <label class="form-label">Sub
                                                                Heading</label>
                                                            <input type="text" class="form-control"
                                                                   name="sub_heading"
                                                                   placeholder="Enter Sub Heading"
                                                                   value="">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row row-cards">

                                        <div class="accordion" id="tab-1">
                                            <div class="accordion-item">
                                                <h2 class="accordion-header" id="heading-1">
                                                    <button class="accordion-button collapsed" type="button"
                                                            data-bs-toggle="collapse" data-bs-target="#collapse-tab-1"
                                                            aria-expanded="false">
                                                        Tab #1
                                                    </button>
                                                </h2>
                                                <div id="collapse-tab-1" class="accordion-collapse collapse"
                                                     data-bs-parent="#tab-1">
                                                    <div class="accordion-body pt-0">
                                                        <!---Tab#1--->
                                                        <div class="card col-md-12">
                                                            <div class="card-body">
                                                                <div class="row row-cards">
                                                                    <div id="categoryProductField">
                                                                        @include('admin.appHomeScreen.partials.category-products-list')
                                                                    </div>
                                                                    <div class="col-md-12 d-flex justify-content-end">
                                                            <span id="add-more" class="btn btn-success"><i
                                                                    class="fas fa-plus"></i>Add More</span>
                                                                    </div>
                                                                </div>
                                                                <div class="row row-cards">
                                                                    <div class="col-md-4 col-sm-6">
                                                                        <div class="mb-3">
                                                                            <label class="form-check form-switch">
                                                                                <input class="form-check-input"
                                                                                       type="checkbox" name="tab_one_is_enable" checked="">
                                                                                <span class="form-check-label">Enable/Disable</span>
                                                                            </label>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="accordion" id="tab-2">
                                            <div class="accordion-item">
                                                <h2 class="accordion-header" id="heading-2">
                                                    <button class="accordion-button collapsed" type="button"
                                                            data-bs-toggle="collapse"
                                                            data-bs-target="#collapse-tab-2" aria-expanded="false">
                                                        Tab #2
                                                    </button>
                                                </h2>
                                                <div id="collapse-tab-2" class="accordion-collapse collapse"
                                                     data-bs-parent="#tab-2">
                                                    <div class="accordion-body pt-0">
                                                        <!---Tab#2--->
                                                        <div class="card col-md-12">
                                                            <div class="card-body">
                                                                <div class="row row cards">
                                                                    <div class="col-md-4 col-sm-6">
                                                                        <div class="mb-3">
                                                                            <label class="form-label">Heading</label>
                                                                            <input type="text"
                                                                                   class="form-control"
                                                                                   name="tab_two_heading"
                                                                                   placeholder="Enter Heading"
                                                                                   value="">
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-md-8 col-sm-6">
                                                                        <div class="mb-3">
                                                                            <label class="form-label">Deal
                                                                                Products<span
                                                                                    class="req_fld">*</span></label>
                                                                                                                                                        @if(!empty(old('deal_product_id')))