@extends('layouts.master')
@section('styles')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
    <!-- Toastify CSS -->
    <link rel="stylesheet" href="{{ asset('build/assets/libs/toastify-js/src/toastify.css') }}">
@endsection
@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}" />
    @php
    $breadcrumbs = [
            ['label' => 'Dashboard', 'url' => route('admin.dashboard')],
            ['label' => 'Offers', 'url' => route('admin.offers.index'), 'active' => false],
            ['label' => 'Events', 'url' => '#', 'active' => true],
        ];
    @endphp
    <x-ui.breadcrumb :items="$breadcrumbs" title="" />

    <!-- Start::row-1 -->
    <div class="row">
        <div class="col-xl-3">
            <x-ui.card title="Add Event">
                  <form id="myForm" action="{{ route('admin.offers.event.store') }}" method="post" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="offer_id" value="{{$offer->id}}">
                    <div class="row gy-3">
                        <x-form.input label="Event Name:" col="mt-3" class="" name="title"
                            placeholder="Signup,reach level 2" autofocus />
                
                        <x-form.input label="Event Short Description:" col="mt-3" class="" name="short_desc"
                            placeholder="Create Account" autofocus />

                        <x-form.input label="Event Coin:" type="number" col="mt-3" class="" name="coin"
                            placeholder="Enter Coin" autofocus />

                        <x-form.input label="Event Postback Key:" col="mt-3 mb-3" class="" name="event_name"
                            placeholder="singup,level" autofocus />

                       <x-form.input label="Event Order BY:" type="number"  id="e_item_order" col="mt-3 mb-3" 
                            name="item_order" placeholder="1" value="1" autofocus />
                    </div>

                    <button type="submit" id="submit" class="btn btn-primary mt-3 mb-3 float-end">Add Event</button>

                    </form>    
            </x-ui.card>
        </div>
        <div class="col-xl-9">
            <x-ui.card :cardClass="'overflow-hidden'" :hr_line="false" title="">
                <x-slot name="header">
                    <h6>{{$offer->title}} Events</h6>
                </x-slot>

                @php
                    $columns = [
                        ['checkbox' => false, 'class' => 'ps-4','label' => '#'],
                        ['label' => 'Event Title'],
                        ['label' => 'Event Coin'],
                        ['label' => 'Event Key'],
                        ['label' => 'Short Description'],
                        ['label' => 'Action'],
                    ];
                @endphp

                <x-ui.table id="mytable" :columns="$columns"></x-ui.table>
                </x-ui.card>
            </div>
        </div>
    </div>

    {{-- Model --}}
    <div class="modal fade" id="eventModal" tabindex="-1" aria-labelledby="eventModal" data-bs-keyboard="false"
        aria-hidden="true">
        <!-- Scrollable modal -->
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="staticBackdropLabel2">Update Event</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form  action="{{ route('admin.offers.event.update') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="id" id="e_id">
                        <div class="row gy-3">
                            <x-form.input label="Event Name:" col="mt-3" class="" name="title1" 
                                placeholder="Signup,reach level 2" autofocus />
                    
                            <x-form.input label="Event Short Description:" col="mt-3" class="" name="short_desc1"
                                placeholder="Create Account" autofocus />

                            <x-form.input label="Event Coin:" type="number" col="mt-3" class="" name="coin1"
                                placeholder="Enter Coin" autofocus />

                            <x-form.input label="Event Postback Key:"  col="mt-3 mb-3" class="" name="event_name1"
                                placeholder="singup,level" autofocus />

                            <x-form.input label="Event Order BY:" type="number"   col="mt-3 mb-3" class="" name="item_order1"
                                placeholder="1" autofocus />
                        </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" id="submit" class="btn btn-primary">Save Changes</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- End model --}}
@endsection

@section('scripts')
    @include('layouts.components.common-script')

    @vite('resources/assets/js/modal.js')

    <script>
        $(document).ready(function() {
            const table = new DataTableUtility('mytable', "{{ route('admin.offers.event.data') }}", {
                'offer_id':"{{$offer->id}}"
            }, [{
                    data: 'id'
                },
                {
                    data: 'title',
                   
                },
                {
                    data: 'coin',
                   
                },
                {
                    data: 'event_name',
                   
                },
                {
                    data: 'short_desc',
                   
                },
                {
                    data: null,
                    orderable: false,
                    render: function(data, type, row) {
                        return `
                            <a href="#" class="btn btn-icon btn-sm btn-info-light btn-wave waves-effect waves-light edit-event" id="${row.id}">
                                <i class="ri-edit-line"></i>
                            </a>
                            <a href="javascript:void(0);" id="` + row.id + `" data-id="offer_event" class="joblist-btn btn btn-icon btn-sm btn-primary2-light btn-wave waves-effect waves-light deleteItem">
                                <i class="ri-delete-bin-line"></i>
                            </a>`;
                    }
                }
            ]);
            table.initialize();

        });

        $('body').on('click', '.edit-event', function() {
            const catId = $(this).attr('id'); // Use the data-id attribute directly
            if (catId) {
                const url = `{{ route('admin.offers.event.edit', ['id' => '__ID__']) }}`.replace('__ID__', catId);

                AjaxUtil.get(url, function(response) {
                    console.log('Response:', response);
                    $('#eventModal #e_id').val(catId);
                    $('#eventModal #title1').val(response.title);
                    $('#eventModal #short_desc1').val(response.short_desc);
                    $('#eventModal #coin1').val(response.coin);
                    $('#eventModal #event_name1').val(response.event_name);
                    $('#eventModal #item_order1').val(response.item_order);
                    $('#eventModal').modal('show');
                }, function(xhr, status, error) {
                    console.error('Error:', error);
                    AjaxUtil.showToast('Error loading data.', 'error');
                });
            } else {
                AjaxUtil.showToast('Invalid ID.', 'error');
            }
        })

    </script>
@endsection