@extends('frontend.layouts.applayout')
@section('main-content')
    <section class="sec_padding">
        <div class="container-fluid px-lg-5">
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="sec_main_title">Kids Cake</h1>
                </div>
            </div>
            <form action="{{ route('custom.kids.cake.store') }}" method="post" enctype="multipart/form-data">
                @csrf
                <div class="row justify-content-center my-lg-5 mt-4">
                    <div class="col-lg-9 col-md-8 tabs_wrapper">
                        <ul class="nav nav-pills mb-4" id="pills-tab" role="tablist">

                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="pills-Cake-Design-tab" data-bs-toggle="pill"
                                    data-bs-target="#pills-Cake-Design" type="button" role="tab"
                                    aria-controls="pills-Cake-Design" aria-selected="true">Cakes design</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link " id="pills-Size-tab" data-bs-toggle="pill"
                                    data-bs-target="#pills-Size" type="button" role="tab" aria-controls="pills-Size"
                                    aria-selected="true">Size/Shape</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="pills-Specialty-tab" data-bs-toggle="pill"
                                    data-bs-target="#pills-Specialty" type="button" role="tab"
                                    aria-controls="pills-Specialty" aria-selected="false">Design/Picture </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="pills-Cake-Type-tab" data-bs-toggle="pill"
                                    data-bs-target="#pills-Cake-Type" type="button" role="tab"
                                    aria-controls="pills-Cake-Type" aria-selected="false">Flavour</button>
                            </li>
                            {{-- <li class="nav-item" role="presentation">
                                <button class="nav-link" id="pills-Cake-Image-tab" data-bs-toggle="pill"
                                    data-bs-target="#pills-Cake-Image" type="button" role="tab"
                                    aria-controls="pills-Cake-Image" aria-selected="false">Upload Picture</button>
                            </li> --}}

                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="pills-Description-tab" data-bs-toggle="pill"
                                    data-bs-target="#pills-Description" type="button" role="tab"
                                    aria-controls="pills-Description" aria-selected="false">Description</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link disabled" id="pills-Summary-tab" data-bs-toggle="pill"
                                    data-bs-target="#pills-Summary" type="button" role="tab"
                                    aria-controls="pills-Summary" aria-selected="false">Summary</button>
                            </li>
                        </ul>
                        <div class="tab-content" id="pills-tabContent">

                            <div class="tab-pane fade show active" id="pills-Cake-Design" role="tabpanel"
                                aria-labelledby="pills-Cake-Design-tab">
                                {{-- ====== cake designs start ====== --}}
                                <div class="row ">
                                    @foreach ($designs as $design)
                                        <div class="col-lg-3 col-md-6 mb-4 ">
                                            <div class="icons_boxes icon_card">
                                                <input type="radio" class="kids-designs" id="design{{ $design->id }}"
                                                    name="design" value="{{ $design->id }}"
                                                    data-name="{{ $design->name }}"
                                                    data-image="{{ $design->image_url ? asset('storage/' . $design->image_url) : '' }}"
                                                    data-price="{{ $design->price }}">
                                                <label for="design{{ $design->id }}">
                                                    <div class="icon-boxes classic ">
                                                        <div class="img-holder">
                                                            <h3 class="name">{{ $design->name }}</h3>
                                                            <figure>
                                                                <img class="img-fluid"
                                                                    src="{{ asset('storage/' . $design->image_url) }}">
                                                            </figure>
                                                        </div>
                                                    </div>
                                                </label>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                                {{-- ====== cake designs end ====== --}}
                            </div>

                            <div class="tab-pane fade show " id="pills-Size" role="tabpanel"
                                aria-labelledby="pills-Size-tab">

                                <div id="kids-cake-size">
                                    <p>Select design first</p>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="pills-Specialty" role="tabpanel"
                                aria-labelledby="pills-Specialty-tab">
                                <div id="kids-cake-type">
                                    <div class="row ">
                                        <div class="col-lg-3 col-md-6 mb-4">
                                            <div class="icons_boxes icon_card">
                                                <input type="radio" class="kids-designs-cake" id="picture-cake-btn"
                                                    name="picture">
                                                <label for="picture-cake-btn">
                                                    <div class="icon-boxes classic">
                                                        <div class="img-holder">
                                                            <h3 class="name">Picture cake</h3>
                                                            <figure>
                                                                <img class="img-fluid"
                                                                    src="{{ asset('frontend/images/PH-10035.png') }}"
                                                                    alt="Picture Cake">
                                                            </figure>
                                                        </div>
                                                    </div>
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-lg-3 col-md-6 mb-4">
                                            <div class="icons_boxes icon_card">
                                                <input type="radio" class="kids-designs-cake" id="design-cake-btn"
                                                    name="character" data-toggle="toggle-designs">
                                                <label for="design-cake-btn">
                                                    <div class="icon-boxes classic">
                                                        <div class="img-holder">
                                                            <h3 class="name">Character Design cake</h3>
                                                            <figure>
                                                                <img class="img-fluid"
                                                                    src="{{ asset('frontend/images/gallery-cards-img/01.png') }}"
                                                                    alt="Design Cake">
                                                            </figure>
                                                        </div>
                                                    </div>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div id="character-designs" class="col-lg-12 mb-4" style="display: none;">
                                    <h3>Select Character Design</h3>
                                    <div class="row ">
                                        @foreach ($characters as $character)
                                            <div class="col-lg-3 col-md-6 mb-4 ">
                                                <div class="icons_boxes icon_card">
                                                    <input type="radio" class="types"
                                                        id="character{{ $character->id }}" name="type"
                                                        value="{{ $character->id }}" data-name="{{ $character->name }}"
                                                        data-image="{{ asset('storage/' . $character->image_url) }}"
                                                        data-price="{{ $character->price }}">
                                                    <label for="character{{ $character->id }}">
                                                        <div class="icon-boxes classic ">
                                                            <div class="img-holder">
                                                                <h3 class="name">{{ $character->name }}</h3>
                                                                <figure>
                                                                    <img class="img-fluid"
                                                                        src="{{ asset('storage/' . $character->image_url) }}">
                                                                </figure>
                                                            </div>
                                                        </div>
                                                    </label>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                                <div id="kids-cake-picture" class="toggle-section" style="display: none;">
                                    <div class="row">
                                        <div class="col-lg-6 mb-4">
                                            <div class="row">
                                                <div class="col-lg-12">
                                                    <h2 class="cake_Title">Upload Image</h2>
                                                </div>
                                                <div class="icons_boxes">
                                                    <input type="file" id="image1" class="images" name="image1"
                                                        accept="image/*">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-lg-12 mt-lg-5 mt-4 text-center">
                                            <div class="add_notes mx-auto" id="next_to_summary">Next</div>
                                        </div>
                                    </div>
                                </div>

                            </div>

                            <div class="tab-pane fade" id="pills-Cake-Type" role="tabpanel"
                                aria-labelledby="pills-Cake-Type-tab">
                                {{-- ====== flavour start ====== --}}
                                <div id="kids-cake-flavour">
                                    <p>Select design and Size first</p>
                                </div>
                                {{-- ====== flavour end ====== --}}
                            </div>

                            <div class="tab-pane fade" id="pills-Description" role="tabpanel"
                                aria-labelledby="pills-Description-tab">
                                <div class="row discription_sec">
                                    <h3>Description</h3>
                                    <div class="col-lg-6">
                                        <label for="">Cake Stand</label>
                                        <textarea rows="4" id="message_on_cake"></textarea>
                                    </div>
                                    <div class="col-lg-6">
                                        <label for="">Cake Topper</label>
                                        <textarea rows="4" id="special_note"></textarea>
                                    </div>
                                    <h3>Terms and Conditions</h3>

                                    <ol>
                                        <li>
                                            Small custom cake orders must be placed 24-48 hours before pick up.
                                        </li>
                                        <li>
                                            kids cake orders or large custom orders must be placed two to three weeks
                                            before the event date.
                                        </li>
                                    </ol>

                                    <div class="add_notes" id="add_note">Add Notes</div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="pills-Summary" role="tabpanel"
                                aria-labelledby="pills-Summary-tab">

                                <div class="Summary_sec">
                                    <div class="row" id="summary_sec"></div>
                                    <div class="row mt-4" id="upload_imgs"></div>
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <h2 class="cake_Title">Cake Stand</h2>
                                            <textarea name="" rows="2" id="msg_on_cake" disabled placeholder="N/A"></textarea>
                                        </div>

                                        <div class="col-lg-6">
                                            <h2 class="cake_Title">Cake Topper</h2>
                                            <textarea name="" rows="2" id="spcl_note" disabled placeholder="N/A"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4">
                        <div class="order-summary">
                            <input type="hidden" name="type" value="Custom Kids Cake">
                            <input type="hidden" name="items" id="items">
                            <input type="hidden" name="cake_price">
                            <input type="hidden" name="type_price">
                            <input type="hidden" name="sub_total">
                            <input type="hidden" name="grand_total">
                            <input type="hidden" name="cake_stand">
                            <input type="hidden" name="cake_topper">

                            <h5>Order Summary</h5>
                            <div class="row">
                                <div class="col-lg-8 col-8">
                                    <p>Cake</p>
                                </div>
                                <div class="col-lg-4 col-4 text-end">
                                    <p class="fw-semibold">$ <span id="cake_price">0.00</span></p>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-lg-8 col-8">
                                    <p>Character Type</p>
                                </div>
                                <div class="col-lg-4 col-4 text-end">
                                    <p class="fw-semibold">$<span id="type_price">0.00</span></p>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-8 col-8">
                                    <p>Sub Total:</p>
                                </div>
                                <div class="col-lg-4 col-4 text-end">
                                    <p class="fw-bold">$<span class="total_cake_price">0.00</span></p>
                                </div>
                            </div>

                            <div class=" row total">
                                <div class="row">
                                    <div class="col-lg-8 col-8">
                                        <p>Total</p>
                                    </div>
                                    <div class="col-lg-4 col-4 text-end">
                                        <p class="grand-total">$<span class="total_cake_price">0.00</span></p>
                                    </div>
                                </div>
                            </div>

                            <button type="submit" id="submit_btn" class="book-btn border-0 d-none">
                                Add To Cart
                            </button>
                        </div>
                    </div>
                </div>
            </form>

        </div>
    </section>
    @push('scripts')
        <script src="{{ asset('frontend/js/kids-cake.js') }}"></script>
    @endpush
@endsection