@extends('admin.layouts.layout')

@section('content')
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>

    <div class="container-fluid">
        <div class="row clearfix">
            <div class="col-lg-12">
                <div class="card">
                    <div class="header">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="row">
                                    <div class="col-md-6">
                                        <a href="{{ route('advertisementdetails.create') }}"><button type="button" class="btn btn-success text-right">Create Advertisement</button></a>
                                    </div>
                                    <div class="col-md-6">

                                    </div>
                                </div>

                            </div>
                            <div class="col-md-6">

                            </div>
                        </div>
                    </div>
                    <div class="body">
                        <ul class="nav nav-tabs-new2">
                            <li class="nav-item"><a class="nav-link show active" data-toggle="tab" href="#Home-new2">All Advertisement</a></li>
                            <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#Profile-new2">My Advertisement</a></li>
                            <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#Contact-new2">Trash</a></li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane show active" id="Home-new2">

                                <div class="row">
                                    <div class="col-md-4">


                                        <div class="row">
                                            <div class="col-md-12 text-left">
                                                <div class="dt-search">
                                                    <table>
                                                        <tr>
                                                            <td><label class="mt-1" for="dt-search-0"> &nbsp; </label></td>
                                                            <td>
                                                                <div class="fancy-checkbox" style="display:none">
                                                                    <label>
                                                                        <input type="checkbox" class="datatablelistselectallcheckboxdesign" id="datatableclicklistassetonlycheckbox"><span>&nbsp;</span>
                                                                        &nbsp;
                                                                        <button type="button" class="btn btn-danger text-right" id="all_asset_delete_option_checkbox" style=" padding: 3px 5px; margin-left: 10px; display: none; "><i class="fa fa-trash-o"></i></button>
                                                                    </label>
                                                                </div>



                                                            </td>
                                                        </tr>
                                                    </table>

                                                </div>
                                            </div>


                                        </div>


                                    </div>

                                    <div class="col-md-8 text-right">

                                        <div class="row">
                                            <div class="col-md-5"></div>
                                            <div class="col-md-7 text-right">

                                                <div class="col-md-12">
                                                    <div class="dt-search">
                                                        <table>
                                                            <tr>
                                                                <td><label class="mt-1" for="dt-search-0">Search : &nbsp; </label></td>
                                                                <td><input type="search"  class="dt-input form-control" id="all_advertisementsearchdata" placeholder="" aria-controls="list_table"> </td>
                                                                <td> <h2 class="filtertableicondesign mt-2">&nbsp; <i class="fa fa-columns" aria-hidden="true"></i></h2> </td>
                                                            </tr>
                                                        </table>

                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="showhidedatatablevaluefilter all_advertisementdisplayfilter" style="display: none">

                                                        <select id="optgroup" class="ms" multiple="multiple" >
                                                            <option selected data-column="0">S.no</option>
                                                            <option selected data-column="1">User id</option>
                                                            <option selected data-column="2">User Name</option>
                                                            <option selected data-column="3">Advertiser Name</option>
                                                            <option selected data-column="4">Advertiser Position</option>
                                                            <option selected data-column="5">Scheduled Start</option>
                                                            <option selected data-column="6">Scheduled Close</option>
                                                            <option  data-column="7">Created</option>
                                                            <option  data-column="8">Updated</option>
                                                            <option  data-column="9">Action</option>
                                                        </select>

                                                    </div>
                                                </div>

                                            </div>

                                        </div>

                                    </div>

                                </div>


                                <div class="table-responsive check-all-parent">
                                    <table class="table" id="list_table">
                                        <thead>
                                        <tr>
                                            <th>S.no</th>
                                            <th>User ID</th>
                                            <th>User Name</th>
                                            <th>Advertiser Name</th>
                                            <th>Advertisement Position</th>
                                            <th>Advertisement Plan</th>
                                            <th>Scheduled Start</th>
                                            <th>Scheduled Close</th>
                                            <th>Created</th>
                                            <th>Updated</th>
                                            <th>Action</th>
                                        </tr>
                                        </thead>
                                        <tbody>

                                        </tbody>
                                    </table>
                                </div>


                            </div>
                            <div class="tab-pane" id="Profile-new2">

                                <div class="row">
                                    <div class="col-md-4">


                                        <div class="row">
                                            <div class="col-md-12 text-left">
                                                <div class="dt-search">
                                                    <table>
                                                        <tr>
                                                            <td><label class="mt-1" for="dt-search-0"> &nbsp; </label></td>
                                                            <td>
                                                                <div class="fancy-checkbox" style="display:none">
                                                                    <label>
                                                                        <input type="checkbox" class="datatablelistselectallcheckboxdesign" id="datatableclicklistassetonlycheckbox"><span>&nbsp;</span>
                                                                        &nbsp;
                                                                        <button type="button" class="btn btn-danger text-right" id="all_asset_delete_option_checkbox" style=" padding: 3px 5px; margin-left: 10px; display: none; "><i class="fa fa-trash-o"></i></button>
                                                                    </label>
                                                                </div>



                                                            </td>
                                                        </tr>
                                                    </table>

                                                </div>
                                            </div>


                                        </div>


                                    </div>

                                    <div class="col-md-8 text-right">

                                        <div class="row">
                                            <div class="col-md-5"></div>
                                            <div class="col-md-7 text-right">

                                                <div class="col-md-12">
                                                    <div class="dt-search">
                                                        <table>
                                                            <tr>
                                                                <td><label class="mt-1" for="dt-search-0">Search : &nbsp; </label></td>
                                                                <td><input type="search"  class="dt-input form-control" id="my_advertisementsearchdata" placeholder="" aria-controls="list_table"> </td>
                                                                <td> <h2 class="filtertableicondesign mt-2">&nbsp; <i class="fa fa-columns" aria-hidden="true"></i></h2> </td>
                                                            </tr>
                                                        </table>

                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="showhidedatatablevaluefilter my_advertisementdisplayfilter" style="display: none">

                                                        <select id="my_advertisementlistoption" class="ms" multiple="multiple" >
                                                            <option selected data-column="0">S.no</option>
                                                            <option selected data-column="1">User id</option>
                                                            <option selected data-column="2">User Name</option>
                                                            <option selected data-column="3">Advertiser Name</option>
                                                            <option selected data-column="4">Advertiser Position</option>
                                                            <option selected data-column="5">Advertiser Plan</option>
                                                            <option selected data-column="6">Scheduled Start</option>
                                                            <option selected data-column="7">Scheduled Close</option>
                                                            <option selected data-column="8">Action</option>
                                                            <option  data-column="9">Created</option>
                                                            <option  data-column="10">Updated</option>
                                                        </select>

                                                    </div>
                                                </div>

                                            </div>

                                        </div>

                                    </div>

                                </div>

                                <div class="table-responsive check-all-parent">
                                    <table class="table" id="list_myadvertishment_table" style="width:100%">
                                        <thead>
                                        <tr>
                                            <th>S.no</th>
                                            <th>User ID</th>
                                            <th>User Name</th>
                                            <th>Advertisement Name</th>
                                            <th>Advertisement Position</th>
                                            <th>Advertisement Plan</th>
                                            <th>Scheduled Start</th>
                                            <th>Scheduled Close</th>
                                            <th>Action</th>
                                            <th>Created</th>
                                            <th>Updated</th>
                                        </tr>
                                        </thead>
                                        <tbody>

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="tab-pane" id="Contact-new2">

                                <div class="row">
                                    <div class="col-md-4">


                                        <div class="row">
                                            <div class="col-md-12 text-left">
                                                <div class="dt-search">
                                                    <table>
                                                        <tr>
                                                            <td><label class="mt-1" for="dt-search-0"> &nbsp; </label></td>
                                                            <td>
                                                                <div class="fancy-checkbox" style="display:none">
                                                                    <label>
                                                                        <input type="checkbox" class="datatablelistselectallcheckboxdesign" id="datatableclicklistassetonlycheckbox"><span>&nbsp;</span>
                                                                        &nbsp;
                                                                        <button type="button" class="btn btn-danger text-right" id="all_asset_delete_option_checkbox" style=" padding: 3px 5px; margin-left: 10px; display: none; "><i class="fa fa-trash-o"></i></button>
                                                                    </label>
                                                                </div>



                                                            </td>
                                                        </tr>
                                                    </table>

                                                </div>
                                            </div>


                                        </div>


                                    </div>

                                    <div class="col-md-8 text-right">

                                        <div class="row">
                                            <div class="col-md-5"></div>
                                            <div class="col-md-7 text-right">

                                                <div class="col-md-12">
                                                    <div class="dt-search">
                                                        <table>
                                                            <tr>
                                                                <td><label class="mt-1" for="dt-search-0">Search : &nbsp; </label></td>
                                                                <td><input type="search"  class="dt-input form-control" id="trash_advertisementsearchdata" placeholder="" aria-controls="list_table"> </td>
                                                                <td> <h2 class="filtertableicondesign mt-2">&nbsp; <i class="fa fa-columns" aria-hidden="true"></i></h2> </td>
                                                            </tr>
                                                        </table>

                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="showhidedatatablevaluefilter trash_advertisementdisplayfilter" style="display: none">

                                                        <select id="trash_advertisementlistoption" class="ms" multiple="multiple" >
                                                            <option selected data-column="0">S.no</option>
                                                            <option selected data-column="1">User id</option>
                                                            <option selected data-column="2">User Name</option>
                                                            <option selected data-column="3">Advertiser Name</option>
                                                            <option selected data-column="4">Advertiser Position</option>
                                                            <option selected data-column="5">Scheduled Start</option>
                                                            <option selected data-column="6">Scheduled Close</option>
                                                            <option  data-column="7">Created</option>
                                                            <option  data-column="8">Updated</option>
                                                            <option selected data-column="9">Deleteted</option>
                                                        </select>

                                                    </div>
                                                </div>

                                            </div>

                                        </div>

                                    </div>

                                </div>

                                <div class="table-responsive check-all-parent">
                                    <table class="table" id="list_trash_table">
                                        <thead>
                                        <tr>
                                            <th>S.no</th>
                                            <th>User ID</th>
                                            <th>User Name</th>
                                            <th>Advertisement Name</th>
                                            <th>Advertisement Position</th>
                                            <th>Advertisement Plan</th>
                                            <th>Scheduled Start</th>
                                            <th>Scheduled Close</th>
                                            <th>Created</th>
                                            <th>Updated</th>
                                            <th>Deleted</th>
                                        </tr>
                                        </thead>
                                        <tbody>

                                        </tbody>
                                    </table>
                                </div>


                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>


    <script>
        $(function () {
            var advertisementdetailslisttable = $('#list_table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route("advertisementdetails.index") }}',
                    type: 'GET'
                },
                columns: [
                    {data: 'DT_RowIndex'},
                    {data: 'userid'},
                    {data: 'username'},
                    {data: 'advertisement_name'},
                    {data: 'advertisement_position'},
                    {data: 'advertisement_plan'},
                    {data: 'scheduledstart'},
                    {data: 'scheduledclose'},
                    {data: 'created'},
                    {data: 'updated'},
                    {data: 'action',orderable: false, searchable: false}
                ]
            });


            $("#list_table").css("width", "100%");

            let columnIdx = 7;
            let column = advertisementdetailslisttable.column(columnIdx);
            column.visible(!column.visible());

            columnIdx = 8;
            column = advertisementdetailslisttable.column(columnIdx);
            column.visible(!column.visible());

            $(document).on("click",'.all_advertisementdisplayfilter .ms-selection .ms-list li',function(){
                advertisementdetailslisttable.draw();
                advertisementdetailslisttable.columns().visible(false);
                var $target = $('.all_advertisementdisplayfilter .ms-selection .ms-list li.ms-selected');
                $target.each(function (index, el) {

                    column = advertisementdetailslisttable.column($(this).attr("data-column"));
                    column.visible(!column.visible());
                });

                $("#list_table").css("width", "100%");

            });

            $(document).on("click",'.all_advertisementdisplayfilter .ms-selectable .ms-list li',function(){
                advertisementdetailslisttable.draw();
                advertisementdetailslisttable.columns().visible(false);
                var $target = $('.all_advertisementdisplayfilter .ms-selection .ms-list li.ms-selected');
                $target.each(function (index, el) {

                    column = advertisementdetailslisttable.column($(this).attr("data-column"));
                    column.visible(!column.visible());
                });

                $("#list_table").css("width", "100%");

            });

            $(document).on("keyup",'#all_advertisementsearchdata',function(){
                advertisementdetailslisttable.search(this.value).draw();
            });


        });

        $(function () {
            var advertisementdetailslisttable = $('#list_myadvertishment_table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route("myadvertisement.list") }}',
                    type: 'GET'
                },
                columns: [
                    {data: 'DT_RowIndex'},
                    {data: 'userid'},
                    {data: 'username'},
                    {data: 'advertisement_name'},
                    {data: 'advertisement_position'},
                    {data: 'advertisement_plan'},
                    {data: 'scheduledstart'},
                    {data: 'scheduledclose'},
                    {data: 'action'},
                    {data: 'created'},
                    {data: 'updated',orderable: false, searchable: false}
                ]
            });


            $("#list_myadvertishment_table").css("width", "100%");

            let columnIdx = 9;
            let column = advertisementdetailslisttable.column(columnIdx);
            column.visible(!column.visible());

            columnIdx = 10;
            column = advertisementdetailslisttable.column(columnIdx);
            column.visible(!column.visible());

            $(document).on("click",'.my_advertisementdisplayfilter .ms-selection .ms-list li',function(){
                advertisementdetailslisttable.draw();
                advertisementdetailslisttable.columns().visible(false);
                var $target = $('.my_advertisementdisplayfilter .ms-selection .ms-list li.ms-selected');
                $target.each(function (index, el) {

                    column = advertisementdetailslisttable.column($(this).attr("data-column"));
                    column.visible(!column.visible());
                });

                $("#list_myadvertishment_table").css("width", "100%");

            });

            $(document).on("click",'.my_advertisementdisplayfilter .ms-selectable .ms-list li',function(){
                advertisementdetailslisttable.draw();
                advertisementdetailslisttable.columns().visible(false);
                var $target = $('.my_advertisementdisplayfilter .ms-selection .ms-list li.ms-selected');
                $target.each(function (index, el) {

                    column = advertisementdetailslisttable.column($(this).attr("data-column"));
                    column.visible(!column.visible());
                });

                $("#list_myadvertishment_table").css("width", "100%");

            });

            $(document).on("keyup",'#my_advertisementsearchdata',function(){
                advertisementdetailslisttable.search(this.value).draw();
            });


        });

        $(function () {
            var advertisementdetailslisttable = $('#list_trash_table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route("advertisementdetails.trash") }}',
                    type: 'GET'
                },
                columns: [
                    {data: 'DT_RowIndex'},
                    {data: 'userid'},
                    {data: 'username'},
                    {data: 'advertisement_name'},
                    {data: 'advertisement_position'},
                    {data: 'advertisement_plan'},
                    {data: 'scheduledstart'},
                    {data: 'scheduledclose'},
                    {data: 'created'},
                    {data: 'updated'},
                    {data: 'deleted',orderable: false, searchable: false}
                ]
            });


            $("#list_trash_table").css("width", "100%");

            let columnIdx = 7;
            let column = advertisementdetailslisttable.column(columnIdx);
            column.visible(!column.visible());

            columnIdx = 8;
            column = advertisementdetailslisttable.column(columnIdx);
            column.visible(!column.visible());

            $(document).on("click",'.trash_advertisementdisplayfilter .ms-selection .ms-list li',function(){
                advertisementdetailslisttable.draw();
                advertisementdetailslisttable.columns().visible(false);
                var $target = $('.all_advertisementdisplayfilter .ms-selection .ms-list li.ms-selected');
                $target.each(function (index, el) {

                    column = advertisementdetailslisttable.column($(this).attr("data-column"));
                    column.visible(!column.visible());
                });

                $("#list_trash_table").css("width", "100%");

            });

            $(document).on("click",'.trash_advertisementdisplayfilter .ms-selectable .ms-list li',function(){
                advertisementdetailslisttable.draw();
                advertisementdetailslisttable.columns().visible(false);
                var $target = $('.all_advertisementdisplayfilter .ms-selection .ms-list li.ms-selected');
                $target.each(function (index, el) {

                    column = advertisementdetailslisttable.column($(this).attr("data-column"));
                    column.visible(!column.visible());
                });

                $("#list_trash_table").css("width", "100%");

            });

            $(document).on("keyup",'#trash_advertisementsearchdata',function(){
                advertisementdetailslisttable.search(this.value).draw();
            });


        });




        $(document).ready(function() {
            $('#my_advertisementlistoption').multiSelect({selectableOptgroup: true});
            $('#trash_advertisementlistoption').multiSelect({selectableOptgroup: true});
        });
    </script>
@endsection