@extends('layouts.backend.app')

@section('title', 'Offer')

@push('css')
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/dataTables.bootstrap5.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/responsive.bootstrap5.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/buttons.bootstrap5.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/extensions/sweetalert2.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/select/select2.min.css')) }}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@6.6.6/css/flag-icons.min.css" />
        <style>
        .fourth_last_row .hover_image_show {
            top: -175px!important;
        }
        .fourth_last_row .arrow_box:after, .arrow_box:before {
            top: 80%;
        }
        .third_last_row .hover_image_show {
            top: -175px!important;
        }
        .third_last_row .arrow_box:after, .arrow_box:before {
            top: 80%;
        }
        .second_last_row .hover_image_show {
            top: -175px!important;
        }
        .second_last_row .arrow_box:after, .arrow_box:before {
            top: 80%;
        }
        .last_row .hover_image_show {
            top: -175px!important;
        }
        .last_row .arrow_box:after, .arrow_box:before {
            top: 80%;
        }

        .select2-selection__arrow {
            display: none;
        }
        table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after {
            background-image: none;
        }
        table.dataTable thead .sorting:before, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_desc:before {
            background-image: none;
            width: 8px;
        }
        .hover_image_show {
          display: none;
        }
        
        .hover_image:hover + .hover_image_show {
          display: block;
        }
        span.position-absolute.hover_image_show {
            background: white;
            border: 5px solid black;
            transition: all 2s linear;
            left: 95px;
            top: 0px;
        }
        .arrow_box:after, .arrow_box:before {
            right: 101%;
            top: 0%;
            border: solid transparent;
            content: "";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
        }
        
        .arrow_box:after {
            border-color: rgba(136, 183, 213, 0);
            border-right-color: #000000;
            border-width: 15px;
            margin-top: -2px;
        }
    </style>
@endpush

@section('content')
    <div class="modal fade" id="linkModal" tabindex="-1" aria-labelledby="linkModal" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="linkModal">Link</h1>
        </div>
        <div class="modal-body">
            <div class="form-group mt-1 mb-1">
                <label for="domain">Domain</label>
                <select name="domain" id="domain" class="form-control">
                    <option value="">Select Domain</option>
                    @foreach ($domains as $domain)
                        <option selected value="{{ $domain->domain }}">
                            {{ $domain->domain }}</option>
                    @endforeach
                </select>
            </div>
            <input type="hidden" class="offer_id" value="2">
          <div class="mb-3">
            <label for="message-text" class="col-form-label">Link:</label>
            <input type="text" class="form-control" id="link_show" readonly>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Ok</button>
        </div>
      </div>
    </div>
  </div>
    <div class="modal fade" id="requestModel" tabindex="-1" aria-labelledby="requestModel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="linkModal">Request For Permission</h1>
        </div>
        <div class="modal-body">
            <div class="card">
                        <div class="card-header" style="border-radius: 100%">
                            Offer Details
                        </div>
                        <div class="card-body border-collapse">
                            <span class="" style="float: right;">
                                <img src="" id="modal_image"
                                    class="img-fluid img-thumbnail izoom" width="150"
                                    style="max-width: 150px;max-height: 150px;min-width: 85px;min-height: 85px;">
                            </span>
                            <p></p>
                            <p class="card-text"><span class="text-muted"><strong>Offer Name</strong>:</span><span id="modal_name"></span></p>
                            <p class="card-text mt-1"><span class="text-muted"><strong>Preview URL </strong>:</span><a href="" id="modal_href"><span id="modal_url"></span></a></p>
                            <p class="card-text mt-1"><span class="text-muted"><strong>Category Name </strong>:</span><span id="modal_category"></span></p>
                            <p class="card-text mt-1"><span class="text-muted"><strong>Expire Date</strong>:</span><span id="modal_date"></span></p>
                            
                            <div class="form-group">
                                <label for="application-message">Application</label>
                                <input type="hidden" id="request-form-id" class="d-none">
                                <textarea name="application" id="application-message" class="form-control"></textarea>
                            </div>
                        </div>
                    </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-info btn-sm" data-bs-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-success btn-sm request-btn-submit">Request</button>
        </div>
      </div>
    </div>
  </div>
    <div class="content-header row">
        <div class="content-header-left col-md-9 col-12 mb-2">
            <div class="row breadcrumbs-top">
                <div class="col-12">
                    <h2 class="content-header-title float-start mb-0">Dashboard</h2>
                    <div class="breadcrumb-wrapper">
                        <ol class="breadcrumb">

                            <li class="breadcrumb-item">
                                <a href="{{ route('affiliate.dashboard') }}">
                                    Dashboard
                                </a>
                            </li>
                            <li class="breadcrumb-item">
                                Offers
                            </li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Basic table -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="accordion">
                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#collapse1" aria-expanded="false" aria-controls="collapse1">
                                Filter 
                            </button>
                        </h2>
                        <div id="collapse1" class="accordion-collapse collapse" aria-labelledby="heading1">
                            <div class="accordion-body">
                                <div class="card-body">
                                    <form action="">
                                        <div class="col-md-12">
                                            <div class="row">
                                                <div class="col-md-3">
                                                    <label for="name">ID/Name</label>
                                                    <input type="text" class="form-control" name="name" id="name"
                                                        placeholder="Enter id or name">
                                                </div>
                                                <div class="col-md-3">
                                                    <label for="country">Country</label>
                                                    <select name="country_id" id="country_id" class="form-control select2" multiple>
                                                        <option value="">Select Country</option>
                                                        @foreach ($countries as $country)
                                                            <option value="{{ $country->id }}">{{ $country->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-md-3">
                                                    <label for="device_id">Device</label>
                                                    <select name="device_id" id="device_id" class="form-control select2" multiple>
                                                        <option value="">Select Country</option>
                                                        @foreach ($devices as $device)
                                                            <option value="{{ $device->id }}">{{ $device->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-md-3">
                                                    <label for="category">Category</label>
                                                    <select name="category_id" id="category_id" class="form-control select2" multiple>
                                                        <option value="">Select Country</option>
                                                        @foreach ($categories as $category)
                                                            <option value="{{ $category->id }}">{{ $category->name }} </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="row mt-2">
                                                <div class="col-md-3">
                                                    <button class="btn btn-success btn-sm" id="search_btn">
                                                        <i class="fa fa-search"></i>
                                                        <span>Search</span>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <table class="table datatables-basic offer_table custom-border table-bordered">
                        <thead>
                            <tr>
                                <th></th>
                                <th></th>
                                <th>ID</th>
                                <th>Country</th>
                                <th>image</th>
                                <th>Name</th>
                                <th>Category</th>
                                <th>Device</th>
                                <th>Payout</th>
                                <th>EPC</th>
                                <th>Link</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </section>

    <!--/ Basic table -->
@endsection


@push('js')
    <script src="{{ asset(mix('vendors/js/tables/datatable/jquery.dataTables.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/dataTables.bootstrap5.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/dataTables.responsive.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/responsive.bootstrap5.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/datatables.checkboxes.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/datatables.buttons.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/buttons.html5.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/dataTables.rowGroup.min.js')) }}"></script>

    <script src="{{ asset(mix('vendors/js/extensions/sweetalert2.all.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/extensions/polyfill.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/forms/select/select2.full.min.js')) }}"></script>
    <script>
        $(document).ready(function() {
            "use strict"

            let search_btn = $("#search_btn");
            search_btn.click(function(e) {
                e.preventDefault();
                dataListView.draw();
            });
            // init table dom
            let Table = $("table");
            // init list view datatable
            let dataListView = $('.datatables-basic').DataTable({
                "pageLength": 50,
                lengthChange: true,
                sScrollX: "100%",
                autoWidth: true,
                "processing": true,
                "serverSide": true,
                "ajax": {
                    "url": "{{ route('affiliate.offer.search') }}",
                    "dataType": "json",
                    "type": "POST",
                    "data": {
                        _token: "{{ csrf_token() }}",
                        name: function() {
                            return $("#name").val();
                        },
                        country_id: function() {
                            let country_id = [];
                            $('#country_id option:selected').each(function() {
                                country_id.push($(this).val());
                            });
                            return JSON.stringify(country_id);
                        },
                        device_id: function() {
                            let device_id = [];
                            $('#device_id option:selected').each(function() {
                                device_id.push($(this).val());
                            });
                            return JSON.stringify(device_id);
                        },
                        category_id: function() {
                            let category_id = [];
                            $('#category_id option:selected').each(function() {
                                category_id.push($(this).val());
                            });
                            return JSON.stringify(category_id);
                        },
                    }
                },
                "columns": [{
                        "data": 'id',
                        orderable: true,
                        searchable: false
                    },
                    {
                        "data": "o_id"
                    },
                    {
                        "data": "o_id"
                    },
                    {
                        "data": "country",
                        orderable: true,
                        searchable: false
                    },
                    {
                        "data": "avatar",
                        orderable: false,
                        searchable: false
                    },
                    {
                        "data": "name",
                        orderable: false,
                        searchable: false
                    },
                    
                    {
                        "data": "category",
                        orderable: true,
                        searchable: false
                    },
                    {
                        "data": "device",
                        orderable: true,
                        searchable: false
                    },
                    {
                        "data": "payout",
                        orderable: false,
                        searchable: false
                    },
                    {
                        "data": "epc",
                        orderable: false,
                        searchable: false
                    },
                    {
                        "data": "Link",
                        orderable: false,
                        searchable: false
                    },
                    {
                        "data": "action",
                        orderable: false,
                        searchable: false
                    },
                ],

                searchDelay: 1500,
                columnDefs: [{
                        // For Responsive
                        className: 'control',
                        orderable: false,
                        responsivePriority: 1,
                        targets: 0
                    },
                    {
                        // For Checkboxes
                        targets: 1,
                        orderable: false,
                        responsivePriority: 3,
                        render: function(data) {
                            return (
                                '<div style="display: none" class="form-check"> <input class="form-check-input dt-checkboxes" type="checkbox" value="" id="' +
                                data +
                                '" /><label class="form-check-label" for="' +
                                data +
                                '"></label></div>'
                            );
                        },
                        checkboxes: {
                            selectAllRender: '<div style="display: none" class="form-check"> <input class="form-check-input" type="checkbox" value="" id="checkboxSelectAll" /><label class="form-check-label" for="checkboxSelectAll"></label></div>',
                            selectRow: true
                        }
                    },
                    {
                        targets: 2,
                        visible: false
                    },
                    {
                        // Actions
                        targets: -1,
                        title: 'Action',
                        orderable: false,
                        render: function(data, type, full) {
                            return (
                                '<a href="' + full['show'] +
                                '" class="text-success" style="margin-left: 10px" data-bs-toggle="tooltip" data-bs-placement="top" title="' +
                                "Show" + '">' +
                                feather.icons['eye'].toSvg({
                                    class: 'font-medium-4'
                                }) +
                                '</a>'
                            );
                        }
                    },
                    {
                        // Actions
                        targets: 4,
                        title: 'Image',
                        orderable: false,
                        render: function(data, type, full) {
                            return (
                                '<span class="position-relative text-center w-100 d-block">'+
                                    '<img class="hover_image" src="'+ full['avatar'] +'"  alt=""  style="height: 50px;width: 50px;">'+
                                    
                                '</span>'
                            );
                        }
                    },
                    {
                        // Actions
                        targets: -2,
                        title: 'Link',
                        orderable: false,
                        render: function(data, type, full) {
                            if(full['status_check'] === 'Approved' )
                            {
                                return (
                                '<button type="button" class="btn btn-primary btn-sm link-btn"  data-link="'  + full['click'] +  '"  data-bs-toggle="modal" data-bs-target="#linkModal" >Get Link</button>'
                                );
                            }else if(full['offer_permission'] == 1){
                                return (
                                    '<span class="btn btn-warning btn-sm">Requested</span>'
                                );
                            }else{
                                return (
                                '<div class="request_button_div_'  + full['click'] +  '"><button type="button" class="btn btn-info btn-sm request-btn"  data-id="'  + full['click'] +  '" data-image="'  + full['avatar'] +  '" data-url="'  + full['preview_url'] +  '"  data-name="'  + full['offer_name'] +  '"  data-category="'  + full['category'] +  '"  data-expire="'  + full['expire_date'] +  '" data-bs-toggle="modal" data-bs-target="#requestModel" >Apply</button></div>'
                                );
                            }
                            
                        }
                    }
                ],
                dom: '<"d-flex justify-content-between mx-0 row"<"col-4"l><"col-8"f>>t<"d-flex justify-content-between mx-0 row mb-2"<"col-8"i><"col-4"p>>',     
                language: {
                    paginate: {
                        // remove previous & next text from pagination
                        previous: '&nbsp;',
                        next: '&nbsp;'
                    },
                    sLengthMenu: "_MENU_",
                    sZeroRecords: "No Result",
                    sSearch: "<span class='search_label'>Search</span>",
                    sProcessing: "Processing...",
                    sInfo: "{{ __('Show ', ['start' => '_START_', 'end' => '_END_', 'total' => '_TOTAL_']) }}"
                },
                aLengthMenu: [
                    [10, 20, 50, 100],
                    [10, 20, 50, 100]
                ],
                select: {
                    style: "multi"
                },
                order: [
                    [2, "desc"]
                ],
                displayLength: 10,
                "drawCallback": function(settings) {
                    var api = this.api();
                    var rowCount = api.rows({ page: 'current' }).count();
                    var rows = api.rows({ page: 'current' }).nodes();
                    $(rows).removeClass('last_one Second_last thirdlast');
                    if (rowCount >= 1) {
                        $(rows[rowCount - 1]).addClass('last_row');
                    }
                    if (rowCount >= 2) {
                        $(rows[rowCount - 2]).addClass('second_last_row');
                    }
                    if (rowCount >= 3) {
                        $(rows[rowCount - 3]).addClass('third_last_row');
                    }
                    if (rowCount >= 4) {
                        $(rows[rowCount - 4]).addClass('fourth_last_row');
                    }
                }
            });

            // Select2 basic
            $(".select2").each(function() {
                let $this = $(this);
                $this.wrap('<div class="position-relative"></div>');
                $this.select2({
                    // the following code is used to disable x-scrollbar when click in select input and
                    // take 100% width in responsive also
                    dropdownAutoWidth: true,
                    width: '100%',
                    dropdownParent: $this.parent(),
                    placeholder: 'Choose One'
                });
            });

            // Select2 multiple
            $(".select2-multiple").each(function() {
                let $this = $(this);
                $this.wrap('<div class="position-relative"></div>');
                $this.select2({
                    // the following code is used to disable x-scrollbar when click in select input and
                    // take 100% width in responsive also
                    dropdownAutoWidth: true,
                    width: '100%',
                    dropdownParent: $this.parent(),
                    placeholder: 'Select Manager'
                });
            });

            // filter
        });
        $(document).on('click', '.link-btn', function () {
            var offer_id = $(this).data('link');
            $('.offer_id').val(offer_id);
            var selectedValue = $('#domain').val();
            let link = selectedValue + "/c?a=" + {{auth()->user()->id}} + "&o=" +offer_id;
            $('#link_show').val(link);
        });
        
        $(document).on('click', '.request-btn-submit', function () {
            var offer_id = $('#request-form-id').val();
            var url = '/affiliate/offer/application/' + offer_id;
            var message = $('#application-message').val();
            $.ajax({
                url: url,
                method: "POST",
                data: {
                    application: message,
                    _token: "{{ csrf_token() }}",
                },
                success: function(response) {
                    toastr.success('Request Sent Successfully','Success');
                    $('.request_button_div_'+offer_id).html('<span class="btn btn-warning btn-sm">Requested</span>')
                    $("#requestModel").modal('hide');
                },
                error: function(xhr, status, error) {
                    var errors = xhr.responseJSON.errors;
                    $.each(errors, function(key, value) {
                        toastr.error(value,'Error');
                    });
                }
            });
        });

       $(document).on('click', '.request-btn', function () {
            var offer_id = $(this).data('id');
            var name = $(this).data('name');
            var image = $(this).data('image');
            var url = $(this).data('url');
            var category = $(this).data('category');
            var expire = $(this).data('expire');
            var image = $(this).data('image');
            
            $('#modal_name').html(name);
            $('#modal_url').html(url);
            $('#modal_href').attr('href', url);
            $('#modal_category').html(category);
            $('#modal_date').html(expire);
            $('#modal_image').attr('src', image);
            var request_form_id = $('#request-form-id');
            
            
            request_form_id.val(offer_id);
            $('#application-message').val('');
        });
        $(document).on('change', '#domain', function () {
            var offer_id = $('.offer_id').val();
            var selectedValue = $('#domain').val();
            let link = selectedValue + "/c?a=" + {{auth()->user()->id}} + "&o=" +offer_id;
            $('#link_show').val(link);
        });
            
    </script>
@endpush