 @extends('publisher.layout.dashboard')
 @section('content')
     <!-- Datatables css -->
     <link
         href="{{ config('app.url') }}/public/public/assets/assets/vendor/datatables.net-bs5/css/dataTables.bootstrap5.min.css"
         rel="stylesheet" type="text/css" />
     <link
         href="{{ config('app.url') }}/public/public/assets/assets/vendor/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css"
         rel="stylesheet" type="text/css" />
     <link
         href="{{ config('app.url') }}/public/public/assets/assets/vendor/datatables.net-fixedcolumns-bs5/css/fixedColumns.bootstrap5.min.css"
         rel="stylesheet" type="text/css" />
     <link
         href="{{ config('app.url') }}/public/public/assets/assets/vendor/datatables.net-fixedheader-bs5/css/fixedHeader.bootstrap5.min.css"
         rel="stylesheet" type="text/css" />
     <link
         href="{{ config('app.url') }}/public/public/assets/assets/vendor/datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css"
         rel="stylesheet" type="text/css" />
     <link
         href="{{ config('app.url') }}/public/public/assets/assets/vendor/datatables.net-select-bs5/css/select.bootstrap5.min.css"
         rel="stylesheet" type="text/css" />

     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.5.0/css/flag-icon.min.css">

     <style>
         .world-icon {
             width: 27px;
         }
     </style>

     <!--page-content-wrapper-->
     <div class="page-content-wrapper">
         <div class="page-content">
             <div class="row">
                 <div class="col-lg-12 ">
                     <div class="card radius-10">
                         <div class="card-header">
                             <h5 class="mb-0">Filter My Offers</h5>
                         </div>
                         <div class="card-body">
                             <form {{-- action="{{ url('publisher/offer/search') }}" --}} method="get">
                                 @csrf
                                 <div class="row">
                                     <div class="col-lg-4">
                                         <label class="form-label">Countries</label>

                                         <select class="select2 form-control select2-multiple" data-toggle="select2"
                                             multiple="multiple" data-placeholder="Choose Country..." name="countries[]">

                                             @foreach ($country as $q)
                                                 <option value="{{ $q->country_name }}">{{ $q->country_name }}</option>
                                             @endforeach
                                         </select>
                                     </div>
                                     <div class="col-lg-3">
                                         <label class="form-label">Offer Name</label>
                                         <input type="" name="name" class="form-control" placeholder="Name Name"
                                             id="name">
                                         <input type="hidden" name="page_type" class="form-control"
                                             placeholder="Enter Name Keyword" value="all_offer">
                                     </div>
                                     <div class="col-lg-2">
                                         <label class="form-label">Offer ID</label>
                                         <input type="" name="id" class="form-control"
                                             placeholder="Enter Offer ID" id="id">
                                     </div>

                                     <div class="col-lg-3">
                                         <label class="form-label">Targeting</label>

                                         <select name="ua_target[]" id="ua_target"
                                             class="select2 form-control select2-multiple" data-toggle="select2"
                                             multiple="multiple" data-placeholder="Choose Device...">

                                             <option value="Windows">Windows</option>
                                             <option value="Android">Android</option>
                                             <option value="Iphone">Iphone</option>
                                             <option value="Ipad">Ipad</option>
                                             <option value="Mac">Mac</option>

                                         </select>
                                     </div>


                                     <div class="col-lg-4">
                                         <label class="form-label">Category</label>
                                         <select name="category[]" class="select2 form-control select2-multiple"
                                             data-toggle="select2" multiple="multiple"
                                             data-placeholder="Choose Category...">

                                             @foreach ($category as $q)
                                                 <option value="{{ $q->id }}">{{ $q->category_name }}</option>
                                             @endforeach
                                         </select>
                                     </div>


                                     @php
                                         $id = isset($_GET['id']) ? $_GET['id'] : '';
                                         $name = isset($_GET['name']) ? $_GET['name'] : '';
                                         $ascending = isset($_GET['ascending']) ? $_GET['ascending'] : '';
                                         $from_payout = isset($_GET['from_payout']) ? $_GET['from_payout'] : '';
                                         $to_payout = isset($_GET['to_payout']) ? $_GET['to_payout'] : '';
                                         $country_list = isset($_GET['countries']) ? $_GET['countries'] : '';
                                         if (!empty($country_list)) {
                                             $country_list = implode(',', $country_list);
                                         }
                                         $ua_target_list = isset($_GET['ua_target']) ? $_GET['ua_target'] : '';
                                         if (!empty($ua_target_list)) {
                                             $ua_target_list = implode(',', $ua_target_list);
                                         }
                                         $category_list = isset($_GET['category']) ? $_GET['category'] : '';
                                         if (!empty($category_list)) {
                                             $category_list = implode(',', $category_list);
                                         }
                                     @endphp
                                     <div class="col-lg-3">
                                         <label class="form-label">Order By</label>
                                         <select type="text" name="ascending" id="ascending" class="form-control">

                                             <option value="desc">Descending</option>
                                             <option value="asc">Ascending</option>
                                         </select>
                                     </div>
                                     <div class="col-lg-2 " style="margin-top: 28px">

                                         <button type="submit" class="btn btn-primary">Search</button>

                                     </div>


                                 </div>

                                 <input type="hidden" id="offer_type" name="offer_type" value="public">
                                 <input type="hidden" id="offer_page_name" name="offer_page_name" value="my">
                             </form>
                         </div>

                     </div>


                 </div>
             </div>
             <div class="row g-4">
                 <div class="col-12">
                     <div class="mb-4">
                         <h4 class="fs-16">My Offer Table</h4>
                         <table id="offer_table" class="table table-striped dt-responsive nowrap w-100">
                             <thead>
                                 <tr>
                                     <th>OID</th>
                                     <th>Preview Image</th>
                                     <th>Name</th>
                                     <th>Category & Verticals</th>
                                     <th>Payout</th>
                                     <th>Allowed Devices</th>
                                     <th>Allowed Countries</th>
                                     <th>Action</th>
                                 </tr>
                             </thead>
                             <tbody>

                             </tbody>
                         </table>

                     </div> <!-- end card -->
                 </div><!-- end col-->
             </div>
         </div>
     </div>
 @endsection('content')
 @section('js')
     <!-- Datatables js -->
     <script src="{{ config('app.url') }}/public/public/assets/assets/vendor/datatables.net/js/jquery.dataTables.min.js">
     </script>
     <script
         src="{{ config('app.url') }}/public/public/assets/assets/vendor/datatables.net-bs5/js/dataTables.bootstrap5.min.js">
     </script>
     <script
         src="{{ config('app.url') }}/public/public/assets/assets/vendor/datatables.net-responsive/js/dataTables.responsive.min.js">
     </script>
     <script
         src="{{ config('app.url') }}/public/public/assets/assets/vendor/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js">
     </script>
     <script
         src="{{ config('app.url') }}/public/public/assets/assets/vendor/datatables.net-fixedcolumns-bs5/js/fixedColumns.bootstrap5.min.js">
     </script>
     <script
         src="{{ config('app.url') }}/public/public/assets/assets/vendor/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js">
     </script>
     <script
         src="{{ config('app.url') }}/public/public/assets/assets/vendor/datatables.net-buttons/js/dataTables.buttons.min.js">
     </script>
     <script
         src="{{ config('app.url') }}/public/public/assets/assets/vendor/datatables.net-buttons-bs5/js/buttons.bootstrap5.min.js">
     </script>
     <script
         src="{{ config('app.url') }}/public/public/assets/assets/vendor/datatables.net-buttons/js/buttons.html5.min.js">
     </script>
     <script
         src="{{ config('app.url') }}/public/public/assets/assets/vendor/datatables.net-buttons/js/buttons.flash.min.js">
     </script>
     <script
         src="{{ config('app.url') }}/public/public/assets/assets/vendor/datatables.net-buttons/js/buttons.print.min.js">
     </script>
     <script
         src="{{ config('app.url') }}/public/public/assets/assets/vendor/datatables.net-keytable/js/dataTables.keyTable.min.js">
     </script>
     <script
         src="{{ config('app.url') }}/public/public/assets/assets/vendor/datatables.net-select/js/dataTables.select.min.js">
     </script>
     <script type="text/javascript">
         $(function() {

             $(document).ready(function() {
                 $('.js-example-basic-multiple').select2();
                 var offer_table = $('#offer_table').DataTable({

                     "mark": true,

                     "order": [

                         [0, "desc"]

                     ],

                     "columnDefs": [

                         {

                             "targets": [0],

                             "render": function(data, type, row, meta) {

                                 return '#' + data;

                             }

                         },

                         {

                             "responsivePriority": 1,

                             "targets": 0

                         },

                         {

                             "responsivePriority": 2,

                             "targets": -1,

                             "orderable": false

                         }

                     ],

                     "processing": true,

                     "serverSide": true,

                     "ajax": {

                         url: "{{ route('publisher.show-all-offers') }}",
                         "data": function(d) {
                             d.offer_name = '{{ $name }}';
                             d.offer_id = '{{ $id }}';
                             d.countries = '{{ $country_list }}';
                             d.ua_target = '{{ $ua_target_list }}';
                             d.category = '{{ $category_list }}';
                             d.ascending = '{{ $ascending }}';
                             d.from_payout = '{{ $from_payout }}';
                             d.to_payout = '{{ $to_payout }}';
                             d.offer_type = $('#offer_type').val();
                             d.offer_page_name = $('#offer_page_name').val();
                         },
                         error: function(xhr) {

                             session_error(xhr);

                             // console.log(xhr.status);

                         }

                     },

                     "columns": [

                         {
                             "data": "id"
                         },

                         {
                             "data": "offerimage"
                         },
                         {
                            "data": "offer_name",
                             "render": function(data, type, row, meta) {
                                 // Display only the first 20 characters of offer_name
                                 return data.length > 20 ? data.substring(0, 20) + '...' :
                                     data;
                            }
                         },
                         {
                             "data": "categoryvertics"
                         },

                         {
                             "data": "oferrevshere"
                         },
                         {
                            "data": "device",
                            "render": function(data, type, row, meta) {
                                if(row.ua_target === 'All'){
                                    return '<i class="fab fa-windows m-1" title="Windows"></i><i class="fas fa-mobile-alt m-1" title="Android"></i><i class="fas fa-mobile m-1" title="Iphone"></i><i class="fas fa-tablet m-1" title="Ipad"></i><i class="fas fa-laptop m-1" title="Mac"></i>';
                                }

                                return data;
                            }
                         },
                         {
                            "data": "countries",
                             "render": function(data, type, row, meta) {
                                 if (data.includes("ALL")) {
                                     return '<img class="world-icon" src="{{ config('app.url') }}/public/public/assets/assets/world.png" >';
                                 }

                                 // Assuming you have a function to map ISO codes to flag icons
                                 var maxFlagsToShow = 3;
                                 var flagsHtml = '';
                                 var totalFlags = 0;

                                 for (var i = 0; i < row.iso_codes.length && i < maxFlagsToShow; i++) {
                                     flagsHtml += '<span class="flag-icon flag-icon-' + row.iso_codes[i].toLowerCase() + '"></span> ';
                                 }

                                 // If there are more flags, add a "+ more" indicator
                                 if (row.iso_codes.length > maxFlagsToShow) {
                                    flagsHtml += `..+ ${row.iso_codes.length - maxFlagsToShow} more`;
                                 }

                                // Return the HTML for display type
                                return type === 'display' ? flagsHtml : data;
                             }
                         },

                         {
                             "data": "offeraction"
                         },

                     ],

                     drawCallback: function(settings) {

                         $(document).find('[data-toggle="tooltip"]').tooltip();

                     },

                     initComplete: function(settings, json) {

                         // $(document).find('[data-toggle="tooltip"]').tooltip();

                     }

                 })
             });
         });
     </script>
 @endsection
