@extends('layouts.master')
@section('styles')
    <link rel="stylesheet" href="{{ asset('build/assets/libs/toastify-js/src/toastify.css') }}">
@endsection
@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}" />

    <!-- Page Header -->
    @php
        $breadcrumbs = [
            ['label' => 'Dashboard', 'url' => route('admin.dashboard')],
            ['label' => 'Rewarded Ad Approve', 'url' => '#', 'active' => true],
        ];
    @endphp
    <x-ui.breadcrumb :items="[]" title="Ads Setup Country Base" />
    <!-- Page Header Close -->

    <!-- Start::row-1 -->
    <div class="row">
        <div class="col-xl-12">
            <x-ui.card :cardClass="'overflow-hidden'" :hr_line="false" title="Video Ads Approval Submitted by User">
                <x-slot name="header">
                    <div class="card-title d-flex gap-2">
                        <x-form.dropdown label="Bulk Actions">
                            <li><a class="dropdown-item" href="#" id="bulkEditBtn" data-id="ad">Update</a></li>
                            {{-- <li><a class="dropdown-item" href="#" id="disable" data-id="ad">Disable</a></li> --}}
                        </x-form.dropdown>
                        <div>
                            <input class="form-control" type="text" id="search" placeholder="Search Country Name, iso"
                                aria-label=".form-control-sm example">
                        </div>
                    </div>
                    {{-- <div class="d-flex gap-4" >
                        <div class="form-group" style="width: 250px;">
                            <div class="input-group">
                                <div class="input-group-text text-muted"> <i class="ri-calendar-line"></i> </div>
                                <input type="text" class="form-control" id="daterange"  placeholder="Date range picker">
                            </div>
                        </div>
                        <button class="btn btn-primary btn-wave add-data" id="applyFilter">
                            <i class="ri-add-line me-1 align-middle"></i>
                            Apply Filter
                        </button>
                    </div> --}}
                </x-slot>

                @php
                    $columns = [
                        ['checkbox' => true, 'class' => 'ps-4'],
                        ['label' => 'Country'],
                        ['label' => 'ISO'],
                        ['label' => 'Banner AD Price'],
                        ['label' => 'Interstital AD Price'],
                        ['label' => 'Rewarded AD Price'],
                        ['label' => 'Video Task Price'],
                        ['label' => 'Visit Task Price'],
                        ['label' => 'InstaReel Task Price'],
                        ['label' => 'Action'],
                    ];
                @endphp

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


<x-ui.modal id="bulkEditModal" title="Update All Selected Countries Price">
    <div class="modal-body">
        <input type="hidden" id="selected_ids" name="ids">
        <div class="row gy-4">
            <x-form.input label="Banner Ad Per Impression Price" type="number" class="bulk-input" name="banner_ad_price"
               placeholder="Enter Diamond Amount" autofocus />

            <x-form.input label="Interstital Ad Per Impression Price" type="number" class="bulk-input" 
                name="inter_ad_price"   placeholder="Enter Diamond Amount" autofocus />

            <x-form.input label="Rewarded Ad Per Impression Price" type="number" class="bulk-input" 
                name="vid_ad_price" placeholder="Enter Diamond Amount" autofocus />
        
            <x-form.input label="Website Visit Each View Price" type="number" class="bulk-input" 
                name="web_price"  placeholder="Enter Diamond Amount" autofocus /> 

            <x-form.input label="Youtube Video Each View Price" type="number" class="bulk-input" 
                name="ytvid_price" placeholder="Enter Diamond Amount" autofocus />        

             <x-form.input label="Instagram Reel Each View Price" type="number" class="bulk-input" 
                name="insta_reel_price"  placeholder="Enter Diamond Amount" autofocus />           
        </div>
    </div>    

    @slot('footer')
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="submit" id="submitForm" class="btn btn-success">Update</button>
       
    @endslot
</x-ui.modal>
 
<x-ui.modal id="priceModal" title="Update Price">
    <div class="modal-body">
        <form action="{{route('admin.ads.setting.update_country_price')  }}" method="POST">
        @csrf
        <input type="hiddens" name="id" id="p_id">
        <div class="row gy-4">
            <x-form.input label="Banner Ad Per Impression Price" type="number" 
               name="pbanner_ad_price"
               placeholder="Enter Diamond Amount" autofocus />

            <x-form.input label="Interstital Ad Per Impression Price" type="number"  
                name="pinter_ad_price"   placeholder="Enter Diamond Amount" autofocus />

            <x-form.input label="Rewarded Ad Per Impression Price" type="number"  
                name="pvid_ad_price" placeholder="Enter Diamond Amount" autofocus />
        
            <x-form.input label="Website Visit Each View Price" type="number"
                name="pweb_price"  placeholder="Enter Diamond Amount" autofocus /> 

            <x-form.input label="Youtube Video Each View Price" type="number" 
                name="pytvid_price" placeholder="Enter Diamond Amount" autofocus />        

             <x-form.input label="Instagram Reel Each View Price" type="number"
                name="pinsta_reel_price"  placeholder="Enter Diamond Amount" autofocus />           
        </div>
    </div>    

    @slot('footer')
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-success">Update</button>
</form>
    @endslot
</x-ui.modal>
 
@endsection

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

    document.addEventListener("DOMContentLoaded", function () {
        $('#daterange').val('');
        const picker = new DateRangePicker('#daterange', {
            dateFormat: 'Y-m-d',
            altFormat: 'd M Y',
            onApply: function(internalRange) {
            },
            onChange:function (selectedDates, dateStr, instance){
            }
        });
    });
    
        $(document).ready(function() {
         const table = new DataTableUtility('adtable', "{{ route('admin.ads.setting.country_data') }}", {
                // start_date: () => $('#daterange').val().split(' to ')[0] || null,
                // end_date: () => $('#daterange').val().split(' to ')[1] || null
            }, [
                 {
                    data: 'id',
                    orderable: false,
                    render: function(data, type, row) {
                        return `<input class="form-check-input suchk rowCheckbox" type="checkbox" id="checkboxNoLabeljob22" data-id="${data}" value="${data}">`;
                    }
                },        {
                    data: 'name'
                },
                {
                    data: 'iso'
                },
                {
                    data: 'banner_ad_price'
                }, 
                {
                    data: 'inter_ad_price'
                }, {
                    data: 'vid_ad_price'
                }, {
                    data: 'web_price'
                }, {
                    data: 'ytvid_price'
                }, {
                    data: 'insta_reel_price'
                },
                {
                    data: null,
                    orderable: false,
                    render: function(data, type, row) {
                        return `<a href="#" id="` + row.id + `" class="btn btn-sm btn-success-light btn-wave waves-effect waves-light edit-price">
                                Edit
                                </a>
                               `;
                    }
                },
            ]);
            table.initialize();
            $('#applyFilter').on('click', () => table.reload({ resetPage: true }));
        });

        $('body').on('click', '.edit-price', function() {
            const id = $(this).attr('id'); 
            if (id) {
                const url = `{{ route('admin.ads.setting.price_info', ['id' => '__ID__']) }}`.replace('__ID__', id);
                AjaxUtil.get(url, function(response) {
                     $("#priceModal").modal('show');
                         $("#p_id").val(id);
                         $("#pbanner_ad_price").val(response.banner_ad_price);
                         $("#pinter_ad_price").val(response.inter_ad_price);
                         $("#pvid_ad_price").val(response.vid_ad_price);
                         $("#pweb_price").val(response.web_price);
                         $("#pytvid_price").val(response.ytvid_price);
                         $("#pinsta_reel_price").val(response.insta_reel_price);
                }, function(xhr, status, error) {
                    console.error('Error:', error);
                    AjaxUtil.showToast('Error loading data.', 'error');
                });
            } else {
                AjaxUtil.showToast('Invalid ID.', 'error');
            }
        })
        // $('#applyFilter').on('click', function() {
        //     console.log('ApplyFilter Clicked → start:', startDate, 'end:', endDate);

        //     // Now reload DataTable with new params
        //     $('#adtable').DataTable().ajax.reload();
        // });


     
  // enable/disable bulk button
  function updateBulkBtnState() {
    const any = $('.rowCheckbox:checked').length > 0;
    $('#bulkEditBtn').prop('disabled', !any);
  }

  $('#adtable_check_all').on('change', function(){
    $('.rowCheckbox').prop('checked', $(this).prop('checked'));
    updateBulkBtnState();
  });

  $(document).on('change', '.rowCheckbox', function(){
    const total = $('.rowCheckbox').length;
    const checked = $('.rowCheckbox:checked').length;
    $('#adtable_check_all').prop('checked', total === checked);
    updateBulkBtnState();
  });

  // open modal with selected ids
  $('#bulkEditBtn').on('click', function(){
    const ids = $('.rowCheckbox:checked').map(function(){ return $(this).val(); }).get();
    if(!ids.length) return showToast('Select at least one row.', 'error');
    $('#selected_ids').val(JSON.stringify(ids)); // store in hidden field
    // optionally clear fields or set defaults:
    $('#banner_ad_price').val('');
    $('#inter_ad_price').val('');
    $('#vid_ad_price').val('');
    $('#web_price').val('');
    $('#ytvid_price').val('');
    $('#insta_reel_price').val('');
    // show modal (Bootstrap 5)
    const modal = new bootstrap.Modal(document.getElementById('bulkEditModal'));
    modal.show();
  });

  // submit AJAX
  $('#submitForm').on('click', function(e){
  e.preventDefault();
   
     const ids = JSON.parse($('#selected_ids').val() || '[]');
    if(!ids.length) return AjaxUtil.showToast('No rows selected.', 'error');

    let valid = true;
    $('.bulk-input').each(function(){
        const val = $(this).val().trim();
        if(val === ''){
        valid = false;
        $(this).addClass('is-invalid'); // Bootstrap red border
        } else {
        $(this).removeClass('is-invalid');
        }
    });

    if(!valid){
       return AjaxUtil.showToast('Please fill all required fields before saving.', 'error');
    }

        AjaxUtil.post('{{ route("admin.ads.setting.bulk_update_country_price") }}',{
            banner_ad_price: $('#banner_ad_price').val(),
            inter_ad_price: $('#inter_ad_price').val(),
            vid_ad_price: $('#vid_ad_price').val(),
            web_price: $('#web_price').val(),
            ytvid_price: $('#ytvid_price').val(),
            insta_reel_price: $('#insta_reel_price').val(),
            ids:ids,
        }, function(response) {
            if(response.status==201){
                AjaxUtil.showToast('Updated successfully', 'success');
                const modalEl = document.getElementById('bulkEditModal');
                const modal = bootstrap.Modal.getInstance(modalEl);
                modal.hide();
               location.reload()
                // ids.forEach(function(id){
                // const row = $('#itemsTable tbody tr[data-id="'+ id +'"]');
                //     if(payload.name) row.find('.col-name').text(payload.name);
                //     if(payload.status) row.find('.col-status').text(payload.status);
                // });

                // uncheck rows and reset
                $('.rowCheckbox:checked').prop('checked', false);
                $('#adtable_check_all').prop('checked', false);
            }else{
                AjaxUtil.showToast(response.message, 'error');
            }
        }, function(xhr, status, error) {
            console.error('Error:', error);
            AjaxUtil.showToast('Error loading data.', 'error');
        });
});
      
    </script>
@endsection