@extends('layouts.admin.master')

@section('title')
    Manage Advertisements
@endsection

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col">
                <div class="card dashboard-custom-card">
                    <div class="card-body">
                        <div class="custom-card-header d-flex justify-content-between align-items-center">
                            <div>
                                <h4 class="h4 mb-1">My Advertisements</h4>
                                <p class="text-muted">Manage your advertisement campaigns</p>
                            </div>
                            <div>
                                <button type="button" class="btn btn-primary" id="addAdvertisementBtn">
                                    <i class="fas fa-plus mr-2"></i> Add Advertisement
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card dashboard-custom-card card-custom">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table datatable custom-table dt-responsive nowrap">
                                <thead>
                                <tr>
                                    <th class="fs-5">SL#</th>
                                    <th class="fs-5">Image</th>
                                    <th class="fs-5">Title</th>
                                    <th class="fs-5">Dates</th>
                                    <th class="fs-5">Order</th>
                                    <th class="fs-5">Status</th>
                                    <th class="fs-5">Action</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Add/Edit Advertisement Modal -->
    <div class="modal fade" id="advertisementModal" tabindex="-1" role="dialog" aria-labelledby="advertisementModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <form id="advertisementForm" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" id="advertisement_id" name="advertisement_id">
                    
                    <div class="modal-header">
                        <h5 class="modal-title" id="advertisementModalLabel">
                            <i class="fas fa-ad mr-2"></i> <span id="modal-title">Add Advertisement</span>
                        </h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="title">Title <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="title" name="title" required>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="description">Description</label>
                                    <textarea class="form-control" id="description" name="description" rows="3"></textarea>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="image">Advertisement Image</label>
                                    <input type="file" class="form-control" id="image" name="image" accept="image/*">
                                    <small class="form-text text-muted">Max size: 2MB</small>
                                </div>
                                <div id="current-image-preview" style="display: none;">
                                    <img src="" id="current-image" alt="Current Image" 
                                        style="max-width: 200px; max-height: 150px; object-fit: contain; border: 1px solid #ddd; padding: 5px;">
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="link_url">Link URL</label>
                                    <input type="url" class="form-control" id="link_url" name="link_url" placeholder="https://example.com">
                                    <small class="form-text text-muted">Where users will be redirected when clicking the ad</small>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="start_date">Start Date <span class="text-danger">*</span></label>
                                    <input type="date" class="form-control" id="start_date" name="start_date" required>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="end_date">End Date <span class="text-danger">*</span></label>
                                    <input type="date" class="form-control" id="end_date" name="end_date" required>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="status">Status <span class="text-danger">*</span></label>
                                    <select class="form-control" id="status" name="status" required>
                                        <option value="active">Active</option>
                                        <option value="inactive">Inactive</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="display_order">Display Order</label>
                                    <input type="number" class="form-control" id="display_order" name="display_order" value="0" min="0">
                                    <small class="form-text text-muted">Lower numbers appear first</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">
                            <i class="fas fa-times mr-1"></i> Close
                        </button>
                        <button type="submit" class="btn btn-primary" id="saveAdvertisementBtn">
                            <i class="fas fa-save mr-1"></i> Save Advertisement
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('css')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.4.1/css/responsive.bootstrap4.min.css">
@endpush

@push('js')
    <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap4.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.4.1/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.4.1/js/responsive.bootstrap4.min.js"></script>

    <script>
        $(document).ready(function() {
            // Initialize DataTable
            var dataTable = $('.datatable').DataTable({
                processing: true,
                serverSide: true,
                responsive: true,
                ajax: {
                    url: "{{ route('sponsors.advertisements.datatable') }}",
                    type: 'GET'
                },
                columns: [
                    { 
                        data: 'DT_RowIndex', 
                        name: 'DT_RowIndex', 
                        orderable: false, 
                        searchable: false,
                        render: function (data, type, row, meta) {
                            return meta.row + meta.settings._iDisplayStart + 1;
                        }
                    },
                    { 
                        data: 'image_preview', 
                        name: 'image_preview',
                        orderable: false,
                        searchable: false,
                        render: function(data) {
                            return data;
                        }
                    },
                    { data: 'title', name: 'title' },
                    { data: 'dates', name: 'dates', orderable: false },
                    { data: 'display_order', name: 'display_order' },
                    { 
                        data: 'status', 
                        name: 'status',
                        render: function(data) {
                            return data;
                        }
                    },
                    { 
                        data: 'action', 
                        name: 'action', 
                        orderable: false, 
                        searchable: false,
                        render: function(data) {
                            return data;
                        }
                    }
                ],
                order: [[4, 'asc']],
                language: {
                    processing: '<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span> '
                },
                pageLength: 10,
                lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]]
            });

            // Image preview on file select
            $('#image').on('change', function(e) {
                var file = e.target.files[0];
                if (file) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        $('#current-image').attr('src', e.target.result);
                        $('#current-image-preview').show();
                    };
                    reader.readAsDataURL(file);
                }
            });

            // Add Advertisement
            $('#addAdvertisementBtn').on('click', function() {
                $('#advertisementForm')[0].reset();
                $('#advertisement_id').val('');
                $('#modal-title').text('Add Advertisement');
                $('#current-image-preview').hide();
                $('#current-image').attr('src', '');
                $('#advertisementModal').modal('show');
            });

            // Clear preview when modal is closed
            $('#advertisementModal').on('hidden.bs.modal', function() {
                $('#current-image-preview').hide();
                $('#current-image').attr('src', '');
            });

            // Edit Advertisement
            $(document).on('click', '.edit-advertisement', function() {
                var id = $(this).data('id');
                
                $.ajax({
                    url: "{{ url('admin/sponsor-advertisements') }}/" + id,
                    method: 'GET',
                    success: function(response) {
                        if (response.success) {
                            var data = response.data;
                            
                            $('#advertisement_id').val(data.id);
                            $('#title').val(data.title);
                            $('#description').val(data.description);
                            $('#link_url').val(data.link_url);
                            
                            // Format dates properly for date input (YYYY-MM-DD)
                            var startDate = data.start_date;
                            var endDate = data.end_date;
                            
                            // If dates are in object format, extract the date string
                            if (typeof startDate === 'object' && startDate.date) {
                                startDate = startDate.date.split(' ')[0];
                            }
                            if (typeof endDate === 'object' && endDate.date) {
                                endDate = endDate.date.split(' ')[0];
                            }
                            
                            $('#start_date').val(startDate);
                            $('#end_date').val(endDate);
                            $('#status').val(data.status);
                            $('#display_order').val(data.display_order);
                            
                            if (data.image) {
                                $('#current-image').attr('src', data.image_url);
                                $('#current-image-preview').show();
                            } else {
                                $('#current-image-preview').hide();
                            }
                            
                            $('#modal-title').text('Edit Advertisement');
                            $('#advertisementModal').modal('show');
                        } else {
                            toastr.error(response.message || 'Failed to load advertisement');
                        }
                    },
                    error: function(xhr) {
                        toastr.error('Failed to load advertisement');
                    }
                });
            });

            // Save Advertisement
            $('#advertisementForm').on('submit', function(e) {
                e.preventDefault();
                
                var formData = new FormData(this);
                var id = $('#advertisement_id').val();
                var url = id ? "{{ url('sponsor-advertisements') }}/" + id : "{{ route('sponsors.advertisements.store') }}";
                
                $.ajax({
                    url: url,
                    method: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        if (response.success) {
                            toastr.success(response.message);
                            $('#advertisementModal').modal('hide');
                            dataTable.ajax.reload();
                        } else {
                            toastr.error(response.message || 'Failed to save advertisement');
                        }
                    },
                    error: function(xhr) {
                        var errorMsg = 'Failed to save advertisement';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMsg = xhr.responseJSON.message;
                        }
                        if (xhr.responseJSON && xhr.responseJSON.errors) {
                            var errors = xhr.responseJSON.errors;
                            errorMsg += ':<br>';
                            $.each(errors, function(key, value) {
                                errorMsg += value[0] + '<br>';
                            });
                        }
                        toastr.error(errorMsg);
                    }
                });
            });

            // Delete Advertisement
            $(document).on('click', '.delete-advertisement', function() {
                var id = $(this).data('id');
                
                if (confirm('Are you sure you want to delete this advertisement?')) {
                    $.ajax({
                        url: "{{ url('admin/sponsor-advertisements') }}/" + id,
                        method: 'DELETE',
                        data: {
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            if (response.success) {
                                toastr.success(response.message);
                                dataTable.ajax.reload();
                            } else {
                                toastr.error(response.message || 'Failed to delete advertisement');
                            }
                        },
                        error: function(xhr) {
                            toastr.error('Failed to delete advertisement');
                        }
                    });
                }
            });
        });
    </script>
@endpush