@extends('layouts.app')

@section('page_title', 'Promotions')

@section('content')
    @include('components.table-component', [
        'pageTitle' => 'Promotions',
        'data' => $promotions ?? [],
        'columns' => [
            ['name' => 'Title', 'key' => 'title', 'sortable' => true],
            ['name' => 'Description', 'key' => 'description', 'sortable' => true],
            ['name' => 'Start Date', 'key' => 'startDate', 'sortable' => true],
            ['name' => 'End Date', 'key' => 'endDate', 'sortable' => true],
            ['name' => 'Status', 'key' => 'status', 'sortable' => true],
            ['name' => 'Image', 'key' => 'image', 'sortable' => false]
        ],
        'allFields' => [
            ['name' => 'Title', 'key' => 'title', 'type' => 'text', 'required' => true],
            ['name' => 'Description', 'key' => 'description', 'type' => 'textarea', 'required' => true],
            ['name' => 'Start Date', 'key' => 'startDate', 'type' => 'date', 'required' => true],
            ['name' => 'End Date', 'key' => 'endDate', 'type' => 'date', 'required' => true],
            ['name' => 'Status', 'key' => 'status', 'type' => 'select', 'options' => ['Active', 'Inactive'], 'required' => true],
            ['name' => 'Image', 'key' => 'image', 'type' => 'file', 'accept' => 'image/*', 'required' => true]
        ],
        'actions' => ['edit', 'view', 'delete'],
        'showAddButton' => true,
        'addButtonUrl' => route('promotions.create'),
        'showCheckboxes' => true,
        'showBatchDelete' => true,
        'showEditModal' => true,
        'showViewModal' => true,
        'baseRoute' => 'promotions'
    ])
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    const dataTable = initializeDataTable({
        route: '{{ route("promotions.data") }}',
        columns: [
            { data: 'title' },
            { 
                data: 'description',
                render: function(data) {
                    return data.length > 50 ? data.substring(0, 50) + '...' : data;
                }
            },
            { 
                data: 'startDate',
                render: function(data) {
                    return moment(data).format('YYYY-MM-DD');
                }
            },
            { 
                data: 'endDate',
                render: function(data) {
                    return moment(data).format('YYYY-MM-DD');
                }
            },
            { 
                data: 'status',
                render: function(data) {
                    return `<span class="badge badge-${data === 'Active' ? 'success' : 'danger'}">${data}</span>`;
                }
            },
            { 
                data: 'image',
                render: function(data) {
                    return data ? `<img src="${data}" alt="Promotion" class="img-thumbnail" style="max-height: 50px;">` : '';
                }
            }
        ]
    });

    // Handle form submissions
    handleFormSubmission({
        addRoute: '{{ route("promotions.store") }}',
        editRoute: '{{ route("promotions.update", ":id") }}',
        deleteRoute: '{{ route("promotions.destroy", ":id") }}',
        dataTable: dataTable,
        validation: {
            title: {
                required: true,
                minlength: 3
            },
            description: {
                required: true,
                minlength: 10
            },
            startDate: {
                required: true,
                date: true
            },
            endDate: {
                required: true,
                date: true,
                greaterThan: '#startDate'
            },
            image: {
                required: function() {
                    return !$('#editForm').length; // Required only for new promotions
                },
                accept: "image/*"
            }
        },
        processData: false,
        contentType: false,
        isMultipart: true
    });

    // Date picker initialization
    $('.datepicker').datepicker({
        format: 'yyyy-mm-dd',
        autoclose: true,
        todayHighlight: true,
        startDate: '0d'
    });

    // Image preview
    $('input[type="file"]').change(function(e) {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                $('#imagePreview').attr('src', e.target.result);
            };
            reader.readAsDataURL(file);
        }
    });
});
</script>
@endpush

@push('styles')
<style>
.promotion-image {
    max-height: 50px;
    width: auto;
}
.datepicker {
    z-index: 1060;
}
</style>
@endpush