@extends('layouts.admin')

@section('content')
<div class="card">
    <div class="card-header bg-primary text-white">
        <h4 class="text-white">Add Section Product</h4>
    </div>
    <div class="card-body">
        <form method="POST" action="{{ route('home.campaign-context-product.store') }}" id="campaignForm">
            @csrf
            <div class="row">
             
               
                <div class="col-md-4 mb-3">
                    <label for="campaign_context_id">Sections</label>
                    <div class="input-group">
                        <select class="form-control custom-input" name="campaign_context_id" id="campaign_context_id" required>
                            <option value="">Select Section</option>
                            @foreach($campaignContexts as $campaign)
                                <option value="{{ $campaign->id }}">{{ $campaign->campaign->name }}</option>
                            @endforeach
                        </select>
                        <div class="input-group-append">
                            <span class="input-group-text">
                                <i class="fas fa-caret-down"></i>
                            </span>
                        </div>
                    </div>
                </div>

                <div class="col-md-4 mb-3">
                    <label for="product_id">Product</label>
                    <div class="input-group">
                        <select class="form-control custom-input" name="product_id" required>
                            <option value="">Select Product</option>
                            @foreach($products as $product)
                                <option value="{{ $product->id }}">{{ $product->name }}</option>
                            @endforeach
                        </select>
                        <div class="input-group-append">
                            <span class="input-group-text">
                                <i class="fas fa-caret-down"></i>
                            </span>
                        </div>
                    </div>
                </div>

                <div class="col-md-12 mb-3">
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>    
            </div>    
        </form>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>

</script>

<style>
    .custom-input {
        padding: 8px 12px; /* Adjust padding as needed */
    }

    .input-group .input-group-text {
        padding: 8px 12px; /* Ensure the icon has similar padding */
    }
</style>
@endsection