@extends("admin.layouts.master")

@section("title","Manage Advertisement")

@section("content")
    <div class="container-fluid">
        <!-- Page Header -->
        <div class="row mb-4">
            <div class="col-lg-12">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h2 class="mb-0">
                            <i class="fas fa-bullhorn text-primary"></i> Advertisement Management
                        </h2>
                        <p class="text-muted mt-2">Manage and control all your website advertisements</p>
                    </div>
                    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#adModal" onclick="resetAdForm()">
                        <i class="fas fa-plus-circle"></i> Add New Advertisement
                    </button>
                </div>
                <hr>
            </div>
        </div>

        <!-- Statistics Cards -->
        <div class="row mb-4">
            <div class="col-md-3">
                <div class="card border-left-primary shadow h-100">
                    <div class="card-body">
                        <div class="text-primary text-uppercase small font-weight-bold">Total Ads</div>
                        <div class="h3 mb-0 font-weight-bold">{{ $advertisements->total() }}</div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card border-left-success shadow h-100">
                    <div class="card-body">
                        <div class="text-success text-uppercase small font-weight-bold">Active Ads</div>
                        <div class="h3 mb-0 font-weight-bold">{{ $advertisements->where('position', 'active')->count() }}</div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card border-left-info shadow h-100">
                    <div class="card-body">
                        <div class="text-info text-uppercase small font-weight-bold">Image Ads</div>
                        <div class="h3 mb-0 font-weight-bold">{{ $advertisements->where('type', 1)->count() }}</div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card border-left-warning shadow h-100">
                    <div class="card-body">
                        <div class="text-warning text-uppercase small font-weight-bold">Code Ads</div>
                        <div class="h3 mb-0 font-weight-bold">{{ $advertisements->where('type', 2)->count() }}</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Advertisements List -->
        @if($advertisements->count() > 0)
            <div class="row">
                @foreach($advertisements as $ad)
                    <div class="col-lg-3 col-xl-3 mb-4">
                        <div class="card ad-card h-100 shadow-sm">
                            <!-- Ad Header -->
                            <div class="card-header bg-gradient-primary text-white d-flex justify-content-between align-items-center">
                                <h6 class="mb-0 font-weight-bold">{{ $ad->title }}</h6>
                                <span class="badge badge-light">
                                    @if($ad->type == 0)
                                        <span class="badge badge-danger">Disabled</span>
                                    @elseif($ad->type == 1)
                                        <span class="badge badge-success">Image</span>
                                    @elseif($ad->type == 2)
                                        <span class="badge badge-info">Code</span>
                                    @endif
                                </span>
                            </div>

                            <!-- Ad Preview/Content -->
                            <div class="card-body">
                                @if($ad->type == 1 && $ad->image)
                                    <div class="ad-image-preview mb-3">
                                        <img src="{{ $ad->image }}" alt="{{ $ad->title }}" class="img-fluid rounded" style="max-height: 200px; object-fit: cover;">
                                    </div>
                                @elseif($ad->type == 2 && $ad->ad_code)
                                    <div class="code-preview bg-dark text-light p-3 rounded mb-3" style="max-height: 150px; overflow-y: auto; font-size: 12px;">
                                        <code>{{ substr($ad->ad_code, 0, 100) }}...</code>
                                    </div>
                                @else
                                    <div class="text-center py-4 bg-light rounded mb-3">
                                        <i class="fas fa-ban fa-2x text-muted"></i>
                                        <p class="text-muted mt-2">Advertisement Disabled</p>
                                    </div>
                                @endif

                                <!-- Ad Details -->
                                <div class="ad-details">
                                    <p class="mb-2">
                                        <small class="text-muted">
                                            <i class="fas fa-map-marker-alt"></i>
                                            <strong>{{ ucfirst($ad->location) }}</strong>
                                        </small>
                                    </p>
                                    <p class="mb-2">
                                        <small class="text-muted">
                                            <i class="fas fa-list-ol"></i>
                                            Order: <strong>#{{ $ad->serial ?? 1 }}</strong>
                                        </small>
                                    </p>
                                    @if($ad->link)
                                        <p class="mb-2">
                                            <a href="{{ $ad->link }}" target="_blank" class="small text-primary">
                                                <i class="fas fa-external-link-alt"></i> Visit Link
                                            </a>
                                        </p>
                                    @endif
                                    @if($ad->start_date || $ad->end_date)
                                        <p class="mb-0">
                                            <small class="text-muted">
                                                <i class="fas fa-calendar"></i>
                                                {{ $ad->start_date ? date('M d, Y', strtotime($ad->start_date)) : 'Start' }}
                                                -
                                                {{ $ad->end_date ? date('M d, Y', strtotime($ad->end_date)) : 'End' }}
                                            </small>
                                        </p>
                                    @endif
                                </div>
                            </div>

                            <!-- Status & Actions -->
                            <div class="card-footer bg-light border-top pt-3 pb-3">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <span class="badge badge-{{ $ad->position === 'active' ? 'success' : 'danger' }} badge-pill">
                                        {{ ucfirst($ad->position) }}
                                    </span>
                                    <small class="text-muted">{{ $ad->created_at->diffForHumans() }}</small>
                                </div>

                                <!-- Action Buttons -->
                                <div class="btn-group w-100" role="group">
                                    <button type="button" class="btn btn-sm btn-outline-info"
                                            data-toggle="modal" data-target="#viewDetailModal"
                                            onclick="viewAdDetails(this)"
                                            data-id="{{ $ad->id }}"
                                            data-title="{{ $ad->title }}"
                                            data-type="{{ $ad->type }}"
                                            data-location="{{ $ad->location }}"
                                            data-serial="{{ $ad->serial }}"
                                            data-position="{{ $ad->position }}"
                                            data-link="{{ $ad->link }}"
                                            data-image="{{ $ad->image }}"
                                            data-ad-code="{{ $ad->ad_code }}"
                                            data-start-date="{{ $ad->start_date }}"
                                            data-end-date="{{ $ad->end_date }}">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                    <button type="button" class="btn btn-sm btn-outline-warning"
                                            data-toggle="modal" data-target="#adModal"
                                            onclick="editAdvertisement(this)"
                                            data-id="{{ $ad->id }}"
                                            data-title="{{ $ad->title }}"
                                            data-type="{{ $ad->type }}"
                                            data-location="{{ $ad->location }}"
                                            data-serial="{{ $ad->serial }}"
                                            data-position="{{ $ad->position }}"
                                            data-link="{{ $ad->link }}"
                                            data-code-type="{{ $ad->code_type }}"
                                            data-ad-code="{{ $ad->ad_code }}"
                                            data-image="{{ $ad->image }}"
                                            data-start-date="{{ $ad->start_date }}"
                                            data-end-date="{{ $ad->end_date }}"
                                            data-link-target="{{ $ad->link_target }}">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button type="button" class="btn btn-sm btn-outline-danger"
                                            onclick="deleteAdvertisement({{ $ad->id }})">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <!-- Pagination -->
            @if($advertisements->hasPages())
                <div class="d-flex justify-content-center mt-5">
                    {{ $advertisements->links() }}
                </div>
            @endif
        @else
            <div class="row">
                <div class="col-lg-12">
                    <div class="alert alert-info alert-dismissible fade show border-0 shadow-sm" role="alert">
                        <div class="text-center py-4">
                            <i class="fas fa-inbox fa-3x text-info mb-3"></i>
                            <h4>No Advertisements Found</h4>
                            <p class="text-muted">Start creating advertisements to manage your portal's promotional content.</p>
                            <button type="button" class="btn btn-primary mt-3" data-toggle="modal" data-target="#adModal" onclick="resetAdForm()">
                                <i class="fas fa-plus-circle"></i> Create First Advertisement
                            </button>
                        </div>
                        <button type="button" class="close" data-dismiss="alert">
                            <span>&times;</span>
                        </button>
                    </div>
                </div>
            </div>
        @endif
    </div>

<!-- ===================== MODALS ===================== -->

<!-- ADD/EDIT ADVERTISEMENT MODAL -->
<div class="modal fade" id="adModal" tabindex="-1" role="dialog" aria-labelledby="adModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content border-0 shadow-lg">
            <div class="modal-header bg-gradient-primary text-white border-0">
                <h5 class="modal-title" id="adModalLabel">
                    <i class="fas fa-plus-circle"></i> Create New Advertisement
                </h5>
                <button type="button" class="close text-white" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>

            <form id="adForm" enctype="multipart/form-data">
                @csrf
                <input type="hidden" id="adId" name="ad_id">
                <input type="hidden" id="methodInput" name="_method" value="POST">
                <input type="hidden" id="existingImage" name="existing_image">

                <div class="modal-body">
                    <div class="ads-config-form">
                        <!-- Title -->
                        <div class="form-group">
                            <label class="font-weight-bold">Ad Title <span class="text-danger">*</span></label>
                            <input type="text" class="form-control form-control-lg" id="adTitle" name="title"
                                placeholder="Enter advertisement title" required>
                            <small class="form-text text-muted">Keep it short and descriptive</small>
                        </div>

                        <!-- Ad Type Selection -->
                        <div class="form-group">
                            <label class="font-weight-bold">Ad Type <span class="text-danger">*</span></label>
                            <select class="form-control form-control-lg" id="adType" name="type" required>
                                <option value="">-- Select Advertisement Type --</option>
                                <option value="0">Disable Advertisement</option>
                                <option value="1">Enable (Image + Link)</option>
                                <option value="2">Enable (Custom Code)</option>
                            </select>
                            <small class="form-text text-muted">Choose how you want to display the ad</small>
                        </div>

                        <!-- DISABLE TYPE (Value: 0) -->
                        <div class="ad-type-section disable-section" style="display: none;">
                            <div class="alert alert-warning border-0 bg-light-warning">
                                <i class="fas fa-ban text-warning"></i>
                                <strong>Advertisement Disabled</strong>
                                <p class="mt-2 mb-0">This advertisement is currently disabled and won't be displayed on your website.</p>
                            </div>
                        </div>

                        <!-- IMAGE TYPE (Value: 1) -->
                        <div class="ad-type-section image-section" style="display: none;">
                            <div class="border rounded p-4 bg-light">
                                <h6 class="mb-3 font-weight-bold">
                                    <i class="fas fa-image text-primary"></i> Image Advertisement Settings
                                </h6>

                                <!-- Current Image Display -->
                                <div class="current-image-wrapper mb-3" style="display: none;">
                                    <label class="font-weight-bold text-info">Current Image</label>
                                    <div class="preview-box border rounded p-2 bg-white text-center mb-3">
                                        <img id="currentImage" src="" alt="Current Image" class="img-fluid" style="max-height: 200px;">
                                        <small class="d-block mt-2 text-muted">Current advertisement image</small>
                                    </div>
                                </div>

                                <!-- Image Upload -->
                                <div class="form-group">
                                    <label class="font-weight-bold">Advertisement Image <span class="text-danger">*</span></label>
                                    <div class="custom-file">
                                        <input type="file" class="custom-file-input imageInput" id="imageInput"
                                               name="image" accept="image/*">
                                        <label class="custom-file-label" for="imageInput">Choose image file</label>
                                    </div>
                                    <small class="form-text text-muted d-block mt-2">
                                        <i class="fas fa-info-circle"></i> Supported: JPG, PNG, GIF | Max size: 2MB
                                    </small>
                                </div>

                                <!-- New Image Preview -->
                                <div class="image-preview-wrapper mb-3" style="display: none;">
                                    <label class="font-weight-bold text-success">New Image Preview</label>
                                    <div class="preview-box border rounded p-2 bg-white text-center">
                                        <img id="imagePreview" src="" alt="Image Preview" class="img-fluid" style="max-height: 250px;">
                                        <small class="d-block mt-2 text-muted" id="imageFileName"></small>
                                    </div>
                                </div>

                                <!-- Link URL -->
                                <div class="form-group">
                                    <label class="font-weight-bold">Advertisement Link URL</label>
                                    <input type="url" class="form-control form-control-lg" id="adLink" name="link"
                                        placeholder="https://example.com" value="">
                                    <small class="form-text text-muted">Leave empty if you don't want a clickable link</small>
                                </div>

                                <!-- Link Target -->
                                <div class="form-group">
                                    <label class="font-weight-bold">Open Link In</label>
                                    <select class="form-control" id="linkTarget" name="link_target">
                                        <option value="_self">Same Window</option>
                                        <option value="_blank" selected>New Tab/Window</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <!-- CODE TYPE (Value: 2) -->
                        <div class="ad-type-section code-section" style="display: none;">
                            <div class="border rounded p-4 bg-light">
                                <h6 class="mb-3 font-weight-bold">
                                    <i class="fas fa-code text-success"></i> Custom Code Advertisement
                                </h6>

                                <!-- Code Type Selection -->
                                <div class="form-group">
                                    <label class="font-weight-bold">Code Type</label>
                                    <select class="form-control" id="codeType" name="code_type">
                                        <option value="html">HTML</option>
                                        <option value="javascript">JavaScript</option>
                                        <option value="adsense">Google AdSense</option>
                                        <option value="custom">Custom Code</option>
                                    </select>
                                </div>

                                <!-- Ad Code Textarea -->
                                <div class="form-group">
                                    <label class="font-weight-bold">Advertisement Code <span class="text-danger">*</span></label>
                                    <textarea class="form-control codeInput" id="adCode" name="ad_code"
                                        rows="8" placeholder="Paste your HTML, JavaScript, or Google AdSense code here..."></textarea>
                                    <small class="form-text text-muted d-block mt-2">
                                        <i class="fas fa-lightbulb"></i>
                                        You can paste Google AdSense code, custom HTML, or JavaScript here
                                    </small>
                                </div>

                                <!-- Code Preview -->
                                <div class="form-group">
                                    <div class="alert alert-info border-0 bg-light-info">
                                        <i class="fas fa-exclamation-circle"></i>
                                        Make sure the code is valid and safe to execute
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- COMMON SETTINGS (For all types) -->
                        <div class="border-top pt-4 mt-4">
                            <h6 class="mb-3 font-weight-bold">
                                <i class="fas fa-cog text-secondary"></i> Additional Settings
                            </h6>

                            <!-- Location -->
                            <div class="form-group">
                                <label class="font-weight-bold">Display Location</label>
                                <select class="form-control" id="adLocation" name="location">
                                    <option value="header">Header</option>
                                    <option value="footer">Footer</option>
                                    <option value="default">Default</option>
                                </select>
                            </div>

                            <!-- Schedule -->
                            <div class="form-group">
                                <label class="font-weight-bold">
                                    <i class="fas fa-calendar"></i> Schedule (Optional)
                                </label>
                                <div class="row">
                                    <div class="col-md-6">
                                        <label class="small text-muted">Start Date</label>
                                        <input type="date" class="form-control" id="adStartDate" name="start_date">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="small text-muted">End Date</label>
                                        <input type="date" class="form-control" id="adEndDate" name="end_date">
                                    </div>
                                </div>
                                <small class="form-text text-muted d-block mt-2">Leave empty to show ad indefinitely</small>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer border-top-0 pt-0">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        <i class="fas fa-times"></i> Cancel
                    </button>
                    <button type="submit" class="btn btn-primary btn-lg" id="submitBtn">
                        <i class="fas fa-save"></i> Create Advertisement
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- VIEW DETAILS MODAL -->
<div class="modal fade" id="viewDetailModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content border-0 shadow-lg">
            <div class="modal-header bg-gradient-info text-white border-0">
                <h5 class="modal-title text-white" id="viewTitle"></h5>
                <button type="button" class="close text-white" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <div id="viewImage" class="mb-3" style="display:none;">
                            <label class="font-weight-bold">Preview Image</label>
                            <img id="viewImageTag" class="img-fluid rounded" style="max-height: 250px;">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <p><strong>Type:</strong> <span id="viewType" class="badge badge-primary"></span></p>
                        <p><strong>Location:</strong> <span id="viewLocation" class="badge badge-success"></span></p>
                        <p><strong>Display Order:</strong> <span id="viewSerial"></span></p>
                        <p><strong>Position:</strong> <span id="viewPosition" class="badge badge-info"></span></p>
                        <p><strong>Status:</strong> <span id="viewStatus"></span></p>
                        <p><strong>Link:</strong> <a id="viewLink" target="_blank"></a></p>
                    </div>
                </div>
                <hr>
                <div id="viewAdCode" style="display:none;">
                    <p><strong>Ad Code:</strong></p>
                    <pre id="viewAdCodeText" class="bg-dark text-light p-3 rounded"></pre>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- Delete Form -->
<form id="deleteForm" method="POST" style="display:none;">
    @csrf
    @method('DELETE')
</form>
@endsection

@section("js")
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

<style>
    .bg-gradient-primary {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .bg-gradient-info {
        background: linear-gradient(135deg, #667eea 0%, #0099f1 100%);
    }

    .bg-light-warning {
        background-color: #fff8e1 !important;
    }

    .bg-light-info {
        background-color: #e3f2fd !important;
    }

    .border-left-primary {
        border-left: 4px solid #667eea;
    }

    .border-left-success {
        border-left: 4px solid #28a745;
    }

    .border-left-info {
        border-left: 4px solid #0099f1;
    }

    .border-left-warning {
        border-left: 4px solid #ffc107;
    }

    .preview-box {
        min-height: 100px;
        background: #f8f9fa;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .modal-lg {
        max-width: 700px;
    }

    .form-control-lg {
        height: auto;
        padding: 0.75rem;
        font-size: 1rem;
    }

    .ads-config-form .form-group label {
        margin-bottom: 0.5rem;
    }

    .ad-type-section {
        animation: fadeIn 0.3s ease-in;
    }

    .ad-card {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        border: 1px solid rgba(0,0,0,.125);
    }

    .ad-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
    }

    .ad-image-preview {
        height: 200px;
        overflow: hidden;
        border-radius: 5px;
        background: #f5f5f5;
    }

    .ad-image-preview img {
        transition: transform 0.3s ease;
    }

    .ad-card:hover .ad-image-preview img {
        transform: scale(1.05);
    }

    .code-preview {
        border-radius: 5px;
        font-family: 'Courier New', monospace;
        line-height: 1.4;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .required {
        color: #dc3545;
        font-weight: bold;
    }

    .badge-pill {
        padding: 0.5rem 0.75rem;
    }

    .btn-group {
        gap: 2px;
    }

    .btn-group .btn {
        flex: 1;
    }

    .current-image-wrapper {
        padding: 15px;
        background: #f0f8ff;
        border-radius: 5px;
        border-left: 4px solid #17a2b8;
    }

    .image-preview-wrapper {
        padding: 15px;
        background: #f0fff4;
        border-radius: 5px;
        border-left: 4px solid #28a745;
    }
</style>

<script>
    $(document).ready(function() {
        const $adForm = $('#adForm');
        const $adType = $('#adType');
        const $imageSection = $('.image-section');
        const $codeSection = $('.code-section');
        const $disableSection = $('.disable-section');
        const $imageInput = $('#imageInput');
        const $imagePreview = $('#imagePreview');
        const $imagePreviewWrapper = $('.image-preview-wrapper');
        const $imageFileName = $('#imageFileName');
        const $codeInput = $('#adCode');
        const $submitBtn = $('#submitBtn');
        const $currentImageWrapper = $('.current-image-wrapper');
        const $currentImage = $('#currentImage');

        // AD TYPE CHANGE EVENT
        $adType.on('change', function() {
            let selectedType = $(this).val();

            // Hide all sections
            $imageSection.hide();
            $codeSection.hide();
            $disableSection.hide();

            // Show selected section
            if(selectedType === '1') {
                $imageSection.show();
                $imageInput.attr('required', true);
                $codeInput.removeAttr('required');
            }
            else if(selectedType === '2') {
                $codeSection.show();
                $imageInput.removeAttr('required');
                $codeInput.attr('required', true);
            }
            else if(selectedType === '0') {
                $disableSection.show();
                $imageInput.removeAttr('required');
                $codeInput.removeAttr('required');
            }
        });

        // IMAGE PREVIEW - নতুন ছবি select করলে
        $imageInput.on('change', function(e) {
            let file = e.target.files[0];
            if(file) {
                let reader = new FileReader();
                reader.onload = function(event) {
                    $imagePreview.attr('src', event.target.result);
                    $imageFileName.text(file.name);
                    $imagePreviewWrapper.show();
                };
                reader.readAsDataURL(file);

                // Update label
                $(this).siblings('.custom-file-label').html(file.name);
            }
        });

        // FORM SUBMIT
        $adForm.on('submit', function(e) {
            e.preventDefault();

            // Validate based on type
            let adType = $('#adType').val();
            let adId = $('#adId').val();

            if(!adType) {
                alert('Please select advertisement type');
                return false;
            }

            // নতুন ad create করলে image required
            if(adType === '1' && !adId && !$imageInput.val()) {
                alert('Please select an image for Image Advertisement');
                $imageInput.focus();
                return false;
            }

            // edit করলে image optional (যদি নতুন image না add করে)
            if(adType === '1' && adId && !$imageInput.val() && !$('#existingImage').val()) {
                alert('Please select an image for Image Advertisement');
                $imageInput.focus();
                return false;
            }

            if(adType === '2' && !$codeInput.val()) {
                alert('Please enter code for Code Advertisement');
                $codeInput.focus();
                return false;
            }

            // Get form data
            let formData = new FormData(this);
            let actionUrl = adId ? '/advertisements/' + adId : '{{ route("advertisements.store") }}';
            let method = adId ? 'POST' : 'POST';

            // Submit via AJAX
            $.ajax({
                url: actionUrl,
                type: method,
                data: formData,
                processData: false,
                contentType: false,
                headers: {
                    'X-CSRF-TOKEN': $('[name="_token"]').val()
                },
                success: function(response) {
                    alert(response.message || 'Advertisement saved successfully!');
                    location.reload();
                },
                error: function(xhr) {
                    if(xhr.responseJSON && xhr.responseJSON.errors) {
                        let errors = xhr.responseJSON.errors;
                        let errorMsg = 'Error: \n';
                        $.each(errors, function(key, value) {
                            errorMsg += value[0] + '\n';
                        });
                        alert(errorMsg);
                    } else {
                        alert('Something went wrong. Please try again.');
                    }
                }
            });
        });
    });

    // RESET FORM (নতুন ad এর জন্য form reset)
    function resetAdForm() {
        $('#adForm')[0].reset();
        $('#adId').val('');
        $('#existingImage').val('');
        $('#methodInput').val('POST');
        $('#adModalLabel').html('<i class="fas fa-plus-circle"></i> Create New Advertisement');
        $('#submitBtn').html('<i class="fas fa-save"></i> Create Advertisement');
        $('.ad-type-section').hide();
        $('.image-preview-wrapper').hide();
        $('.current-image-wrapper').hide();
        $('.custom-file-label').html('Choose image file');
    }

    // EDIT ADVERTISEMENT
    function editAdvertisement(btn) {
        let adId = $(btn).data('id');
        let adData = {
            id: adId,
            title: $(btn).data('title'),
            type: $(btn).data('type'),
            link: $(btn).data('link'),
            link_target: $(btn).data('link-target'),
            ad_code: $(btn).data('ad-code'),
            code_type: $(btn).data('code-type'),
            location: $(btn).data('location'),
            serial: $(btn).data('serial'),
            start_date: $(btn).data('start-date'),
            end_date: $(btn).data('end-date'),
            position: $(btn).data('position'),
            image: $(btn).data('image')
        };

        $('#adModalLabel').html('<i class="fas fa-edit"></i> Edit Advertisement');
        $('#adId').val(adData.id);
        $('#existingImage').val(adData.image || '');
        $('#methodInput').val('PUT');

        $('#adTitle').val(adData.title);
        $('#adType').val(adData.type).trigger('change');
        $('#adLink').val(adData.link || '');
        $('#linkTarget').val(adData.link_target || '_blank');
        $('#adCode').val(adData.ad_code || '');
        $('#codeType').val(adData.code_type || 'html');
        $('#adLocation').val(adData.location || 'header');
        $('#adStartDate').val(adData.start_date || '');
        $('#adEndDate').val(adData.end_date || '');

        // Show current image যদি থাকে
        if(adData.image && adData.image !== 'undefined' && adData.image.trim() !== '') {
            $('#currentImage').attr('src', adData.image);
            $('.current-image-wrapper').show();
        } else {
            $('.current-image-wrapper').hide();
        }

        $('#submitBtn').html('<i class="fas fa-save"></i> Update Advertisement');
    }

    // VIEW ADVERTISEMENT DETAILS
    function viewAdDetails(btn) {
        let type = $(btn).data('type');
        let typeText = type == 0 ? 'Disabled' : (type == 1 ? 'Image' : 'Code');

        $('#viewTitle').text($(btn).data('title'));
        $('#viewType').text(typeText);
        $('#viewLocation').text($(btn).data('location'));
        $('#viewSerial').text($(btn).data('serial') || 'N/A');
        $('#viewPosition').text($(btn).data('position'));
        $('#viewStatus').html('<span class="badge badge-' + ($(btn).data('position') === 'active' ? 'success' : 'danger') + '">' + $(btn).data('position') + '</span>');

        let link = $(btn).data('link');
        if(link) {
            $('#viewLink').attr('href', link).text(link);
        } else {
            $('#viewLink').text('No link provided');
        }

        let image = $(btn).data('image');
        if(image && image !== 'undefined' && image.trim() !== '') {
            $('#viewImageTag').attr('src', image);
            $('#viewImage').show();
        } else {
            $('#viewImage').hide();
        }

        let adCode = $(btn).data('ad-code');
        if(adCode && adCode !== 'undefined' && adCode.trim() !== '') {
            $('#viewAdCodeText').text(adCode);
            $('#viewAdCode').show();
        } else {
            $('#viewAdCode').hide();
        }
    }

    // DELETE ADVERTISEMENT
    function deleteAdvertisement(adId) {
        if(confirm('Are you sure you want to delete this advertisement? This action cannot be undone.')) {
            let form = document.getElementById('deleteForm');
            form.action = '/advertisements/' + adId;
            form.submit();
        }
    }
</script>

@endsection