@extends('layouts.admin.master')

@section('title')
    Sponsored Gallery Management
@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">Sponsored Gallery Management</h4>
                                <p class="text-muted mb-0">Manage and approve sponsored content from sponsors</p>
                            </div>
                            <a href="{{ route('admin.gallery.index', ['type' => 'featured']) }}" class="btn btn-outline-primary">
                                <i class="fas fa-star"></i> View Featured Gallery
                            </a>
                        </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" id="sponsoredGalleryTable">
                                <thead>
                                    <tr>
                                        <th class="fs-5">SL</th>
                                        <th class="fs-5">Type</th>
                                        <th class="fs-5">Sponsor</th>
                                        <th class="fs-5">Title</th>
                                        <th class="fs-5">Media</th>
                                        <th class="fs-5">Status</th>
                                        <th class="fs-5">Order</th>
                                        <th class="fs-5">Approved By</th>
                                        <th class="fs-5">Valid Till</th>
                                        <th class="fs-5">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Quick Edit Modal for Approval and Valid Till --}}
    <div class="modal fade" id="quickEditModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Quick Edit - <span id="modal-item-title"></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">
                    <form id="quickEditForm">
                        <input type="hidden" id="edit-gallery-id" name="gallery_id">

                        <div class="row">
                            <div class="col-sm-12 col-md-6">
                                <div class="form-group mb-0">
                                    <label for="edit-is-approved">Approval Status <span class="text-danger">*</span></label>
                                    <select class="form-control" id="edit-is-approved" name="is_approved" required>
                                        <option value="1">Approved</option>
                                        <option value="0">Pending</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-12 col-md-6">
                                <div class="form-group mb-0">
                                    <label for="edit-order">Display Order <span class="text-danger">*</span></label>
                                    <input type="number" class="form-control" id="edit-order" name="order" min="0" required>
                                    <small class="text-muted">Lower numbers appear first</small>
                                </div>
                            </div>
                        </div>

                        <div class="form-group mb-0">
                            <label for="edit-valid-till">Valid Till Date</label>
                            <input type="date" class="form-control" id="edit-valid-till" name="valid_till" min="{{ date('Y-m-d') }}">
                            <small class="text-muted">Leave empty for permanent display</small>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        <i class="fas fa-times"></i> Cancel
                    </button>
                    <button type="button" class="btn btn-primary" id="saveQuickEdit">
                        <i class="fas fa-save"></i> Save Changes
                    </button>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('js')
    <script>
        $(function () {
            const dataTable = $('#sponsoredGalleryTable').DataTable({
                order: [[0, 'desc']],
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('admin.gallery.sponsored.datatable') }}",
                    type: "POST",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                },
                dom: "<'row'<'col-md-6 d-flex align-items-center'f><'col-md-6 d-flex justify-content-end'B>>" +
                    "<'row'<'col-md-12'tr>>" +
                    "<'row'<'col-md-6'i><'col-md-6'p>>",
                buttons: [
                    {
                        extend: 'excelHtml5',
                        text: '<img src="/frontend/logo/download-cloud-02.png" alt="Export Excel" width="24" height="24"> Export as Excel',
                        className: 'btn btn-success btn-sm ms-2'
                    },
                    {
                        text: '<img src="/frontend/logo/sliders-02.png" alt="Filter" width="24" height="24"> Filter',
                        className: 'btn btn-light btn-sm border'
                    }
                ],
                columns: [
                    {
                        data: null,
                        name: 'id',
                        orderable: false,
                        searchable: false,
                        render: function (data, type, row, meta) {
                            return meta.row + meta.settings._iDisplayStart + 1;
                        }
                    },
                    {
                        data: 'resource_type_badge',
                        name: 'resource_type',
                        orderable: true
                    },
                    {
                        data: 'sponsor_company_name',
                        name: 'sponsor_id',
                        orderable: true
                    },
                    {
                        data: 'title',
                        name: 'title',
                        orderable: true
                    },
                    {
                        data: 'media',
                        name: 'media',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'status',
                        name: 'is_active',
                        orderable: true
                    },
                    {
                        data: 'order',
                        name: 'order',
                        orderable: true
                    },
                    {
                        data: 'approved_by_name',
                        name: 'approved_by',
                        orderable: false
                    },
                    {
                        data: 'validity',
                        name: 'valid_till',
                        orderable: true
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    }
                ]
            });

            // Handle Quick Edit button
            $(document).on('click', '.quick-edit-btn', function (e) {
                e.preventDefault();
                const galleryId = $(this).data('id');
                const title = $(this).data('title');
                const isApproved = $(this).data('is-approved');
                const order = $(this).data('order');
                const validTill = $(this).data('valid-till');
                
                $('#modal-item-title').text(title);
                $('#edit-gallery-id').val(galleryId);
                $('#edit-is-approved').val(isApproved ? '1' : '0');
                $('#edit-order').val(order || 0);
                $('#edit-valid-till').val(validTill || '');
                
                $('#quickEditModal').modal('show');
            });

            // Handle Save Quick Edit
            $('#saveQuickEdit').on('click', function() {
                const galleryId = $('#edit-gallery-id').val();
                const isApproved = $('#edit-is-approved').val();
                const order = $('#edit-order').val();
                const validTill = $('#edit-valid-till').val();
                
                $(this).prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Saving...');
                
                $.ajax({
                    url: "{{ route('admin.gallery.update-sponsored') }}",
                    method: 'POST',
                    data: {
                        gallery_id: galleryId,
                        is_approved: isApproved,
                        order: order,
                        valid_till: validTill || null,
                        _token: $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        $('#saveQuickEdit').prop('disabled', false).html('<i class="fas fa-save"></i> Save Changes');
                        if (response.success) {
                            toastr.success(response.message);
                            $('#quickEditModal').modal('hide');
                            dataTable.ajax.reload(null, false);
                        } else {
                            toastr.error(response.message);
                        }
                    },
                    error: function(xhr) {
                        $('#saveQuickEdit').prop('disabled', false).html('<i class="fas fa-save"></i> Save Changes');
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            toastr.error(xhr.responseJSON.message);
                        } else {
                            toastr.error('Failed to update sponsored content');
                        }
                    }
                });
            });

            // Handle toggle status
            $(document).on('click', '.toggle-status', function (e) {
                e.preventDefault();
                const action = $(this).data('action');
                
                $.ajax({
                    url: action,
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        if (response.success) {
                            toastr.success(response.message);
                            dataTable.ajax.reload(null, false);
                        } else {
                            toastr.error(response.message);
                        }
                    },
                    error: function(xhr) {
                        toastr.error('Failed to toggle status');
                    }
                });
            });

        });
    </script>
@endpush