@extends('backend.dashboard')
@section('content')

<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card card-primary">
                    {{-- Card Header --}}
                  <div class="card-header"
                        style="
                            display:flex;
                            flex-wrap:wrap;
                            align-items:center;
                            justify-content:center;
                            gap:10px;
                            position:relative;
                            padding:15px;
                        ">

                        <!-- Title -->
                        <h3 style="
                            padding:20px;
                            font-weight:700;
                            font-size:30px;
                            padding-bottom:6px;
                            border-bottom:3px solid #a74a28;
                            margin:0;
                            text-align:center;
                            flex:1 1 100%;
                        ">
                        Early Learning Create
                        </h3>

                        <!-- Back Button -->
                        <a href="{{ route('book-offers.index') }}"
                        class="btn btn-primary"
                        style="
                            flex:0 0 auto;
                        ">
                            <i class="fas fa-arrow-left"></i> Back
                        </a>

                    </div>


                    {{-- Form Start --}}
                    <form action="{{ route('book-offers.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf

                        <div class="card-body m-3">

                            {{-- Image --}}
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                       <label style="font-size:16px; font-weight:600;">Image</label>

                                        <input type="file" name="image" class="form-control" accept="image/*">
                                        @error('image')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>

                                  <div class="col-md-4">
                                    <div class="form-group">
                                       <label style="font-size:16px; font-weight:600;">Alt Text</label>

                                        <input type="text" name="alt_text" value="{{ old('alt_text') }}" class="form-control" placeholder="Enter Alt Text">
                                        @error('alt_text')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>

                                 <div class="col-md-4">
                                    <div class="form-group">
                                       <label style="font-size:16px; font-weight:600;">Title</label>

                                        <input type="text" name="title" value="{{ old('title') }}" class="form-control" placeholder="Enter Title">
                                        @error('title')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                            </div>


                            <div class="row">
                                   <div class="col-md-4">
                                        <div class="form-group">
                                            <label style="font-size:16px; font-weight:600;">Catagory</label>
                                            <select name="category_id" class="form-control">
                                                <option value="" disabled selected>Select Catagory </option>

                                                @foreach ($catagories as $catagory)
                                                    <option value={{$catagory->id}}>{{$catagory->title}}</option>
                                                @endforeach

                                            </select>
                                            @error('category_id')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>

                                <div class="col-md-4">
                                    <div class="form-group">
                                       <label style="font-size:16px; font-weight:600;">Author</label>

                                        <input type="text" name="author" value="{{ old('author') }}" class="form-control" placeholder="Enter Author">
                                        @error('author')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>


                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label style="font-size:16px; font-weight:600;">Book Link</label>

                                        <input type="text"
                                            name="amazon_link"
                                            value="{{ old('amazon_link', $popular->amazon_link ?? '') }}"
                                            class="form-control"
                                            placeholder="Enter Amazon Link">

                                        @error('amazon_link')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>

                            </div>



                            {{-- Description & Priority --}}
                            <div class="row">


                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label style="font-size:16px; font-weight:600;">Priority</label>

                                        <input type="number" name="priority" value="{{ old('priority') }}" class="form-control" placeholder="Enter Priority (e.g. 1,2,3)">
                                        @error('priority')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>

                                    <div class="col-md-6">
                                    <div class="form-group">
                                        <label style="font-size:16px; font-weight:600;">Status</label>

                                        <select name="status" class="form-control">
                                            <option value="">Choose</option>
                                            <option value="1">Active</option>
                                            <option value="2">De-Active</option>
                                        </select>
                                        @error('status')
                                            <span class="text-danger"><strong>{{ $message }}</strong></span>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                        </div>
                        {{-- /.card-body --}}
                    <div class="card-footer d-flex justify-content-end">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save"></i> Submit
                        </button>
                    </div>


                    </form>
                    {{-- Form End --}}

                </div>

            </div>
        </div>
    </div>
</section>

@endsection