@extends('admin.template.master')

@section('title')
    <section class="content-header">
        <h1>
            Offer
            <small>all Offer information</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="{!! url('admin/') !!}"><i class="fa fa-dashboard"></i> Home</a></li>
            <li class="active">Offer</li>
        </ol>
    </section>
@endsection

@section('main-content')
    <section class="content">
        @if(Session::has('message'))
            <div class="row">
                <div class="col-xs-12">
                    <div class="alert alert-success alert-dismissible">
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                        {{Session('message')}}
                    </div>
                </div>
            </div>
        @endif

        <div class="row">
            <div class="col-xs-12">
                <div class="box">
                    <div class="box-header d-flex justify-content-between align-items-center" style="display: flex; justify-content: space-between; align-items: center;">

                        <!-- Left: Title -->
                        <h3 class="box-title" style="margin: 0;">List</h3>

                        <!-- Center: Filter -->
                        <div style="flex: 1; text-align: center;">
                            <label for="is_store_filter" style="margin-right: 8px;">Offer Type</label>
                            <select id="is_store_filter" class="form-control" style="display: inline-block; width: 180px;">
                                <option value="">All</option>
                                <option value="0">Offer</option>
                                <option value="1">Store</option>
                                <option value="2">Campaign</option>
                            </select>
                        </div>

                        <!-- Right: Button -->
                        <div>
                            <a href="{!! url('/admin/offers/create') !!}" class="btn btn-primary">
                                <i class="fa fa-fw fa-plus"></i> Add Offer
                            </a>
                        </div>

                    </div>

                    <div class="box-body table-responsive">
                        <table class="table table-hover" id="brand_table">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>Name</th>
                                <th>Order</th>
                                <th>Status</th>
                                <th>Type</th>
                                <th>Created At</th>
                                <th>Edited At</th>
                                <th>Created By</th>
                                <th>Updated By</th>
                                <th style="width: 141px;">Action</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('javascripts')
    <script type="text/javascript">
        let table = $('#brand_table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('getOfferData') }}",
                data: function (d) {
                    d.is_store = $('#is_store_filter').val(); // pass filter
                }
            },
            order: [[0, "desc"]],
            columns: [
                {data: 'offer_id'},
                {data: 'offer_name'},
                {data: 'offer_position'},
                {data: 'status'},
                {data: 'is_store'},
                {data: 'created_at'},
                {data: 'updated_at'},
                {data: 'created_by'},
                {data: 'updated_by'},
                {data: 'action', searchable: false, orderable: false}
            ]
        });

        // 🔹 Reload table when filter changes
        $('#is_store_filter').on('change', function () {
            table.ajax.reload();
        });
    </script>
@endsection