@extends('layouts.admin')

@section('content')
<div class="card">
    <div class="card-header">
        <h4>Edit Campaign Context Product</h4>
    </div>
    <div class="card-body">
        <form method="POST" action="{{ route('campaign-context-product.update', $campaignContextProduct->id) }}" id="campaignForm">
            @csrf
            <div class="row">
                <div class="col-md-4 mb-3">
                    <label for="brand_id">Brand</label>
                    <div class="input-group">
                        <select class="form-control custom-input" name="brand_id" id="brand_id" required>
                            <option value="">Select Brand</option>
                            @foreach($brands as $brand)
                                <option value="{{ $brand->id }}" {{ $brand->id == $campaignContextProduct->brand_id ? 'selected' : '' }}>
                                    {{ $brand->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="category_id">Category</label>
                    <div class="input-group">
                        <select class="form-control custom-input" name="category_id" id="category_id" required>
                            <option value="">Select Category</option>
                            <!-- Categories will be populated by JS -->
                        </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="campaign_context_id">Campaign Context</label>
                    <div class="input-group">
                        <select class="form-control custom-input" name="campaign_context_id" id="campaign_context_id" required>
                            <option value="">Select Campaign Context</option>
                            <!-- Campaign contexts will be populated by JS -->
                        </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->id == $campaignContextProduct->product_id ? 'selected' : '' }}>
                                    {{ $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">Update</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    var selectedBrandId = "{{ $campaignContextProduct->brand_id }}";
    var selectedCategoryId = "{{ $campaignContextProduct->category_id }}";
    var selectedCampaignContextId = "{{ $campaignContextProduct->campaign_context_id }}";

    // Load categories based on selected brand
    function loadCategories(brandId) {
        if (brandId) {
            $.ajax({
                url: '/categories/' + brandId,
                type: 'GET',
                success: function(data) {
                    $('#category_id').empty().append('<option value="">Select Category</option>');
                    $.each(data, function(index, category) {
                        $('#category_id').append('<option value="' + category.id + '"' + (category.id == selectedCategoryId ? ' selected' : '') + '>' + category.name + '</option>');
                    });
                    loadCampaigns(selectedCategoryId); // Load campaigns for the selected category
                }
            });
        } else {
            $('#category_id').empty().append('<option value="">Select Category</option>');
            $('#campaign_context_id').empty().append('<option value="">Select Campaign Context</option>');
        }
    }

    // Load campaigns based on selected category
    function loadCampaigns(categoryId) {
        if (categoryId) {
            $.ajax({
                url: '/campaigns/' + categoryId,
                type: 'GET',
                success: function(data) {
                    $('#campaign_context_id').empty().append('<option value="">Select Campaign Context</option>');
                    $.each(data, function(index, campaign) {
                        $('#campaign_context_id').append('<option value="' + campaign.id + '"' + (campaign.id == selectedCampaignContextId ? ' selected' : '') + '>' + campaign.campaign.name + '</option>');
                    });
                }
            });
        } else {
            $('#campaign_context_id').empty().append('<option value="">Select Campaign Context</option>');
        }
    }

    // On brand change, load categories
    $('#brand_id').change(function() {
        var brandId = $(this).val();
        loadCategories(brandId);
    });

    // On category change, load campaigns
    $('#category_id').change(function() {
        var categoryId = $(this).val();
        loadCampaigns(categoryId);
    });

    // Initially load categories for the pre-selected brand
    loadCategories(selectedBrandId);
});
</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