@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 All 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 Type</label>
                                     <select type="text" name="o_type" class="form-control">
                                         <option></option>
                                         <option value="private">Private</option>
                                         <option value="public">Public</option>
                                     </select>
                                 </div>
                                 <div class="col-lg-3">
                                     <label class="form-label">Name</label>
                                     <input type="" name="name" class="form-control" placeholder="Offer Name" id="name">
                                     <input type="hidden" name="page_type" class="form-control" placeholder="Enter Name Keyword" value="all_offers">
                                 </div>
                                 <div class="col-lg-2">
                                     <label class="form-label">Offer ID</label>
                                     <input type="" name="id" class="form-control" placeholder="Offer ID" id="id">
                                 </div>

                                 <div class="col-lg-4">
                                     <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'] : '';
                                    $o_type = isset($_GET['o_type']) ? $_GET['o_type'] : '';
                                    $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="all">
                         </form>
                     </div>

                 </div>
             </div>
         </div>
         <div class="row g-4">
             <div class="col-12">
                 <div class="mb-4">
                     <h4 class="fs-16">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>Offer Type</th>
                                 <th>Action</th>
                             </tr>
                         </thead>
                         <tbody>

                         </tbody>
                     </table>

                 </div> <!-- end card -->
             </div><!-- end col-->
         </div> <!-- end row-->
     </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() {
             $('.select2-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.o_type = '{{ $o_type }}';
                         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);

                     }

                 },

                 "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": "offer_type",
                     },


                     {
                         "data": "offeraction"
                     },

                 ],

                 drawCallback: function(settings) {

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

                 },

                 initComplete: function(settings, json) {

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

                 }

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