@extends('layouts.master')

@section('page_title', 'Create Ads Product') 
@section('title', 'Create Ads Product')
@section('main_item', 'Create Ads Product')
@section('sub_item', 'Create Ads Product')

@section('content')
<div class="col-md-12 mt-4">
    <!-- Card Container with Shadow Effect -->
    <div class="card shadow-lg p-4 rounded-3">
        <h4 class="text-center mb-4">Create Ads Product</h4>

        <!-- Form -->
        <form action="{{ route('ads_products.store') }}" method="POST" id="adsProductForm">
            @csrf
            <div class="row">
                <!-- Ads SKU Field -->
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="ads_sku" class="form-label">Ads SKU</label>
                        <div class="input-group">
                            <span class="input-group-text bg-primary text-white"><i class="bi bi-barcode"></i></span>
                            <input type="text" class="form-control" id="ads_sku" name="ads_sku" placeholder="e.g. 812" required aria-label="Ads SKU" value="{{ old('ads_sku') }}">
                        </div>
                        @error('ads_sku')
                            <div class="text-danger mt-2">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <!-- Product Selection -->
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="product_ids" class="form-label">Select Products</label>
                        <div class="input-group">
                        <select class="form-select w-50" name="product_ids[]" multiple required aria-label="Select Products" id="product_ids">
                            @foreach($products as $product)
                                <option value="{{ $product->id }}" {{ in_array($product->id, old('product_ids', [])) ? 'selected' : '' }}>{{ $product->product_name }}</option>
                            @endforeach
                        </select>
                        @error('product_ids')
                            <div class="text-danger mt-2">{{ $message }}</div>
                        @enderror
                        </div>
                    </div>
                </div>
            </div>

            <!-- Submit Button -->
            <div class="text-center mt-4">
                <button type="submit" class="btn btn-primary btn-lg px-4 py-2" id="submitBtn">
                    <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true" id="loadingSpinner"></span>
                    Save Ads Product
                </button>
            </div>
        </form>

        <!-- Success/Error Message -->
        <div class="mt-3" id="formStatus" style="display: none;">
            <div class="alert alert-success" id="successMessage" style="display: none;">
                Product saved successfully!
            </div>
            <div class="alert alert-danger" id="errorMessage" style="display: none;">
                Something went wrong, please try again.
            </div>
        </div>
    </div>
</div>

@endsection

@section('styles')
<style>
    /* Form Card Styling */
    .card {
        background: linear-gradient(to right, #f5f7fa, #c3cfe2);
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
        border-radius: 20px;
    }

    .card h4 {
        font-weight: bold;
        color: #333;
    }

    /* Input Fields */
    .form-control {
        border-radius: 10px;
        border: 1px solid #ccc;
        box-shadow: none;
        transition: all 0.3s ease-in-out;
    }

    .form-control:focus {
        border-color: #007bff;
        box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
    }

    .input-group-text {
        border-radius: 10px 0 0 10px;
        background-color: #007bff;
        color: white;
    }

    /* Select Box Styling */
    .form-select {
        border-radius: 10px;
        border: 1px solid #ccc;
        box-shadow: none;
    }

    .form-select:focus {
        border-color: #007bff;
        box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
    }

    /* Submit Button Styling */
    .btn-primary {
        background-color: #007bff;
        border: none;
        border-radius: 10px;
        font-weight: bold;
        transition: background-color 0.3s ease-in-out, transform 0.2s ease;
    }

    .btn-primary:hover {
        background-color: #0056b3;
        transform: scale(1.05);
    }

    .btn-primary:active {
        background-color: #004085;
        transform: scale(1);
    }

    /* Alerts */
    .alert {
        font-weight: bold;
    }

    .alert-success {
        background-color: #28a745;
        color: white;
    }

    .alert-danger {
        background-color: #dc3545;
        color: white;
    }
</style>
@endsection

@section('scripts')
<script>
    document.getElementById('adsProductForm').addEventListener('submit', function(e) {
        // Removing e.preventDefault() to allow normal form submission
        let submitBtn = document.getElementById('submitBtn');
        let loadingSpinner = document.getElementById('loadingSpinner');
        let successMessage = document.getElementById('successMessage');
        let errorMessage = document.getElementById('errorMessage');
        let formStatus = document.getElementById('formStatus');

        submitBtn.disabled = true;  // Disable button to prevent multiple submissions
        loadingSpinner.classList.remove('d-none');  // Show loading spinner

        // Optional: You can add AJAX handling here if needed

        // Simulate form submission process (you can replace this with actual form submission logic)
        setTimeout(function() {
            loadingSpinner.classList.add('d-none');  // Hide loading spinner
            submitBtn.disabled = false;  // Enable button

            // Show success/failure message
            formStatus.style.display = 'block';

            // Example success or failure message (Replace this with actual logic)
            let isSuccess = true; // Set to false for error testing

            if (isSuccess) {
                successMessage.style.display = 'block';
                errorMessage.style.display = 'none';
            } else {
                errorMessage.style.display = 'block';
                successMessage.style.display = 'none';
            }

            // Allow normal form submission after handling
            document.getElementById('adsProductForm').submit();
        }, 2000); // Simulated delay of 2 seconds
    });
</script>
@endsection