@extends('backend.admin.layouts.app')
@section('content')
    <div class="pagetitle">
        <h1>Dashboard</h1>
        <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="index.html">Home</a></li>
                <li class="breadcrumb-item">Dashboard</li>
                <li class="breadcrumb-item active">{{ $PageTitle }}</li>
            </ol>
        </nav>
    </div><!-- End Page Title -->

    <section class="section dashboard">
        <div class="row">
            <div class="col-lg-8">

                <div class="card">
                    <div class="card-body mt-3">
                        <form action="{{ route('admin.home-section.store') }}" method="POST">
                            @csrf

                            {{-- Main Category / Menu --}}
                            <div class="row mb-3">
                                <label for="menu_id" class="col-sm-3 col-form-label">Main Category</label>
                                <div class="col-sm-9">
                                    <select name="menu_id"
                                            id="menu_id"
                                            class="form-control @error('menu_id') is-invalid @enderror">
                                        <option value="">Select main category</option>
                                        @foreach($menus as $menu)
                                            <option value="{{ $menu->id }}"
                                                {{ old('menu_id') == $menu->id ? 'selected' : '' }}>
                                                {{ $menu->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            {{-- Section Title --}}
                            <div class="row mb-3">
                                <label for="title" class="col-sm-3 col-form-label">Section Title</label>
                                <div class="col-sm-9">
                                    <input type="text"
                                           name="title"
                                           id="title"
                                           class="form-control @error('title') is-invalid @enderror"
                                           value="{{ old('title') }}"
                                           placeholder="e.g. New Arrivals, T-Shirt Collection">
                                </div>
                            </div>

                            {{-- Section Subtitle --}}
                            <div class="row mb-3">
                                <label for="subtitle" class="col-sm-3 col-form-label">Subtitle</label>
                                <div class="col-sm-9">
                                    <input type="text"
                                           name="subtitle"
                                           id="subtitle"
                                           class="form-control @error('subtitle') is-invalid @enderror"
                                           value="{{ old('subtitle') }}"
                                           placeholder="Optional short description">
                                </div>
                            </div>

                            {{-- Max Products --}}
                            <div class="row mb-3">
                                <label for="max_products" class="col-sm-3 col-form-label">Max Products</label>
                                <div class="col-sm-9">
                                    <input type="number"
                                           name="max_products"
                                           id="max_products"
                                           class="form-control @error('max_products') is-invalid @enderror"
                                           value="{{ old('max_products', 8) }}"
                                           min="1"
                                           max="100">
                                </div>
                            </div>

                            {{-- Order --}}
                            <div class="row mb-3">
                                <label for="order" class="col-sm-3 col-form-label">Order</label>
                                <div class="col-sm-9">
                                    <input type="number"
                                           name="order"
                                           id="order"
                                           class="form-control @error('order') is-invalid @enderror"
                                           value="{{ old('order', 0) }}">
                                </div>
                            </div>

                            {{-- Active --}}
                            <div class="row mb-3">
                                <label class="col-sm-3 col-form-label">Active</label>
                                <div class="col-sm-9 d-flex align-items-center">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input"
                                               type="checkbox"
                                               id="is_active"
                                               name="is_active"
                                               value="1"
                                               {{ old('is_active', 1) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="is_active">Show on homepage</label>
                                    </div>
                                </div>
                            </div>

                            {{-- Submit --}}
                            <div class="row mb-3">
                                <div class="col-sm-9">
                                    <button type="submit" class="btn btn-primary">Save</button>
                                </div>
                            </div>

                        </form><!-- End General Form Elements -->

                    </div>
                </div>

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