@extends('layout.app')

@section('page-title', $title)

@section('breadcrumb')
    <div class="tf-breadcrumb">
        <div class="container">
            <div class="tf-breadcrumb-wrap d-flex justify-content-between flex-wrap align-items-center">
                <div class="tf-breadcrumb-list">
                    <a href="{{ url('/new-design/home.php') }}" class="text">Home</a>
                    <i class="icon icon-arrow-right"></i>
                    <span class="text">{{ $title }}</span>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('content')
    <section class="customize-section">
        <div class="container">
            <div class="customize-wrapper">
                {{-- Page Title and Description --}}
                <div class="customize-header">
                    <h1 class="customize-title">{{ $title }}</h1>
                    <p class="customize-description">{{ $description }}</p>
                </div>

                {{-- Customize Form --}}
                <form id="customized-add-to-cart-form" action="{{ $add_to_cart_action }}" method="post">
                    <input type="hidden" name="product_id" value="{{ $product_id }}">
                    <input type="hidden" name="action_name" value="add_to_cart">
                    
                    {{-- Form Errors --}}
                    <div class="form-errors"></div>

                    {{-- Table Header (Desktop) --}}
                    <div class="customize-table-header d-none d-md-flex">
                        <div class="col-image"></div>
                        <div class="col-name">Product Name</div>
                        <div class="col-options">Options</div>
                        <div class="col-qty">Qty</div>
                        <div class="col-price">Price</div>
                        <div class="col-extended">Ext</div>
                    </div>

                    {{-- Required Items --}}
                    <div class="customize-items required-items">
                        @foreach($set_contents as $index => $item)
                            @if($item['is_required'])
                                @include('partials.customize.product-item', ['item' => $item, 'index' => $index])
                            @endif
                        @endforeach
                    </div>

                    {{-- Total and Add to Cart Button for Required Items --}}
                    @if($has_optional_items && !$custom_cushion_set && !$custom_cover_set)
                        @include('partials.customize.totals-section', ['section_id' => 1])
                    @endif

                    {{-- Optional Items --}}
                    @if($has_optional_items && !$custom_cushion_set && !$custom_cover_set)
                        <div class="customize-optional-header">
                            <h2>Optional Items</h2>
                        </div>

                        <div class="customize-table-header d-none d-md-flex">
                            <div class="col-image"></div>
                            <div class="col-name">Product Name</div>
                            <div class="col-options">Options</div>
                            <div class="col-qty">Qty</div>
                            <div class="col-price">Price</div>
                            <div class="col-extended">Ext</div>
                        </div>

                        <div class="customize-items optional-items">
                            @foreach($set_contents as $index => $item)
                                @if($item['is_optional'])
                                    @include('partials.customize.product-item', ['item' => $item, 'index' => $index])
                                @endif
                            @endforeach
                        </div>
                    @endif

                    {{-- Final Total and Add to Cart Button --}}
                    @include('partials.customize.totals-section', ['section_id' => 2])

                </form>
            </div>
        </div>
    </section>
@endsection

@push('after-foot-js')
    <script type="text/javascript" src="{{ asset('new-design/js/customize.js') }}"></script>
    <script>
        $(document).ready(function() {
            CustomizeHandler.init();
        });
    </script>
@endpush