@extends('brand.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" style="padding-right: 0px;">
                <div class="card">
                    <div class="header">
                        <div class="row">

                            <div class="col-md-6">
                                <h4 class="alltabletopheadingdesign">Asset</h4>
                            </div>

                            <div class="col-md-6 text-right">
                                <a data-toggle="modal" data-target="#createassetmodal"><button type="button" class="btn btn-primary text-right">Create Asset</button></a> &nbsp;
                            </div>

                        </div>
                    </div>
                    <div class="body">

                        <style>
                            .filteroption {
                                padding: 15px;
                                display:none;
                            }
                            .filteroption a {
                                color: black;
                                font-size: 10px;
                                font-weight: 600;
                                border: 1px solid black;
                                padding: 5px;
                                line-height: 40px;
                                cursor: pointer;
                            }
                        </style>

                        <ul class="nav nav-tabs-new2">
                            <li class="nav-item"><a class="nav-link show active" data-toggle="tab" href="#assets">All <span id="display_brand_all_asset_count"></span> </a></li>
                            <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#drafts">Drafts <span id="display_brand_draft_asset_count"></span></a></li>
                            <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#publish">Publish <span id="display_brand_publish_asset_count"></span> </a></li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane show active" id="assets">

                                <div class="row">
                                    <div class="col-md-12 text-right">

                                        <div class="row">
                                            <div class="col-md-7"></div>
                                            <div class="col-md-5 text-right">
                                                <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="dt-search-0" 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 class="showhidedatatablevaluefilter allassetcolumnfilter" style="display: none">

                                                    <select id="allassetcolumnfilter" class="ms" multiple="multiple" >
                                                        <option selected data-column="1">S.no</option>
                                                        <option selected data-column="2">Asset Name</option>
                                                        <option selected data-column="3">User Id</option>
                                                        <option selected data-column="4">Cloud Space</option>
                                                        <option selected data-column="5">Selling Cost</option>
                                                        <option selected data-column="6">Impressions </option>
                                                        <option selected data-column="7">Downloads</option>
                                                        <option selected data-column="8">Total Earnings </option>
                                                        <option selected data-column="9">Latest Revision</option>
                                                        <option data-column="10">Discount</option>
                                                        <option data-column="11">Discount Price</option>
                                                        <option data-column="12">Festival discount</option>
                                                        <option data-column="13">Festival discount price</option>
                                                        <option selected data-column="14">Status</option>
                                                        <option selected data-column="15">Action</option>
                                                    </select>

                                                </div>
                                            </div>

                                        </div>



                                    </div>

                                </div>

                                <div class="table-responsive check-all-parent">

                                    <table class="table" id="all_asset_list_table">
                                        <thead>
                                        <tr>
                                            <th>&nbsp;</th>
                                            <th>S.no</th>
                                            <th>Asset Name</th>
                                            <th>User Id</th>
                                            <th>Cloud Space</th>
                                            <th>Selling Cost</th>
                                            <th>Impressions </th>
                                            <th>Downloads</th>
                                            <th>Total Earnings </th>
                                            <th>Latest Revision</th>
                                            <th>Discount</th>
                                            <th>Discount Price</th>
                                            <th>Festival discount</th>
                                            <th>Festival discount price</th>
                                            <th>Status</th>
                                            <th>Action</th>
                                        </tr>
                                        </thead>
                                        <tbody>

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

                            </div>
                            <div class="tab-pane" id="drafts">

                                <div class="row">
                                    <div class="col-md-12 text-right">

                                        <div class="row">
                                            <div class="col-md-7"></div>
                                            <div class="col-md-5 text-right">
                                                <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="dt-search-0" 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 class="showhidedatatablevaluefilter draftscolumnfilter" style="display: none">

                                                    <select id="draftscolumnfilter" class="ms" multiple="multiple" >
                                                        <option selected data-column="1">S.no</option>
                                                        <option selected data-column="2">Asset Name</option>
                                                        <option selected data-column="3">User Id</option>
                                                        <option selected data-column="4">Cloud Space</option>
                                                        <option selected data-column="5">Selling Cost</option>
                                                        <option selected data-column="6">Impressions </option>
                                                        <option selected data-column="7">Downloads</option>
                                                        <option selected data-column="8">Total Earnings </option>
                                                        <option selected data-column="9">Latest Revision</option>
                                                        <option data-column="10">Discount</option>
                                                        <option data-column="11">Discount Price</option>
                                                        <option data-column="12">Festival discount</option>
                                                        <option data-column="13">Festival discount price</option>
                                                        <option selected data-column="14">Status</option>
                                                        <option selected data-column="15">Action</option>
                                                    </select>

                                                </div>
                                            </div>

                                        </div>



                                    </div>

                                </div>

                                <div class="table-responsive check-all-parent">

                                    <table class="table" id="all_asset_drafts_table">
                                        <thead>
                                        <tr>
                                            <th>&nbsp;</th>
                                            <th>S.no</th>
                                            <th>Asset Name</th>
                                            <th>User Id</th>
                                            <th>Cloud Space</th>
                                            <th>Selling Cost</th>
                                            <th>Impressions </th>
                                            <th>Downloads</th>
                                            <th>Total Earnings </th>
                                            <th>Latest Revision</th>
                                            <th>Discount</th>
                                            <th>Discount Price</th>
                                            <th>Festival discount</th>
                                            <th>Festival discount price</th>
                                            <th>Status</th>
                                            <th>Action</th>
                                        </tr>
                                        </thead>
                                        <tbody>

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

                            </div>
                            <div class="tab-pane" id="publish">

                                <div class="row">
                                    <div class="col-md-12 text-right">

                                        <div class="row">
                                            <div class="col-md-7"></div>
                                            <div class="col-md-5 text-right">
                                                <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="dt-search-0" 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 class="showhidedatatablevaluefilter publishcolumnfilter" style="display: none">

                                                    <select id="publishcolumnfilter" class="ms" multiple="multiple" >
                                                        <option selected data-column="1">S.no</option>
                                                        <option selected data-column="2">Asset Name</option>
                                                        <option selected data-column="3">User Id</option>
                                                        <option selected data-column="4">Cloud Space</option>
                                                        <option selected data-column="5">Selling Cost</option>
                                                        <option selected data-column="6">Impressions </option>
                                                        <option selected data-column="7">Downloads</option>
                                                        <option selected data-column="8">Total Earnings </option>
                                                        <option selected data-column="9">Latest Revision</option>
                                                        <option data-column="10">Discount</option>
                                                        <option data-column="11">Discount Price</option>
                                                        <option data-column="12">Festival discount</option>
                                                        <option data-column="13">Festival discount price</option>
                                                        <option selected data-column="14">Status</option>
                                                        <option selected data-column="15">Action</option>
                                                    </select>

                                                </div>
                                            </div>

                                        </div>



                                    </div>

                                </div>

                                <div class="table-responsive check-all-parent">

                                    <table class="table" id="all_asset_publish_table">
                                        <thead>
                                        <tr>
                                            <th>&nbsp;</th>
                                            <th>S.no</th>
                                            <th>Asset Name</th>
                                            <th>User Id</th>
                                            <th>Cloud Space</th>
                                            <th>Selling Cost</th>
                                            <th>Impressions </th>
                                            <th>Downloads</th>
                                            <th>Total Earnings </th>
                                            <th>Latest Revision</th>
                                            <th>Discount</th>
                                            <th>Discount Price</th>
                                            <th>Festival discount</th>
                                            <th>Festival discount price</th>
                                            <th>Status</th>
                                            <th>Action</th>
                                        </tr>
                                        </thead>
                                        <tbody>

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

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

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


    <link rel="stylesheet" href="https://cdn.datatables.net/2.0.7/css/dataTables.dataTables.css">


    <script>

        $(function () {
            const table = new DataTable('#all_asset_list_table', {
                processing: true,
                paging: false,
                serverSide: true,
                ajax: {
                    url: '{{ route("brandassetdetails.index") }}',
                    type: 'GET'
                },
                columns: [
                    {data: 'displaycheckbox'},
                    {data: 'DT_RowIndex'},
                    {data: 'asset_name'},
                    {data: 'user_id'},
                    {data: 'cloud_space'},
                    {data: 'selling_cost'},
                    {data: 'impressions'},
                    {data: 'downloads'},
                    {data: 'totalearnings'},
                    {data: 'latestrevision'},
                    {data: 'discount'},
                    {data: 'discountprice'},
                    {data: 'festivaldiscount'},
                    {data: 'festivaldiscountprice'},
                    {data: 'displaystatus'},
                    {data: 'action',orderable: false, searchable: false}
                ]
            });

            let columnIdx = 10;
            let column = table.column(columnIdx);
            column.visible(!column.visible());

            columnIdx = 11;
            column = table.column(columnIdx);
            column.visible(!column.visible());

            columnIdx = 12;
            column = table.column(columnIdx);
            column.visible(!column.visible());

            columnIdx = 13;
            column = table.column(columnIdx);
            column.visible(!column.visible());

            $(document).on("click",'.allassetcolumnfilter .ms-selection .ms-list li',function(){
                table.draw();
                table.columns().visible(false);
                var $target = $('.allassetcolumnfilter .ms-selection .ms-list li.ms-selected');
                $target.each(function (index, el) {
                    console.log($(this).attr("data-column"));
                    column = table.column($(this).attr("data-column"));
                    column.visible(!column.visible());
                });

                $("#all_asset_list_table").removeAttr("style");

            });

            $(document).on("click",'.allassetcolumnfilter .ms-selectable .ms-list li',function(){
                table.draw();
                table.columns().visible(false);
                var $target = $('.allassetcolumnfilter .ms-selection .ms-list li.ms-selected');
                $target.each(function (index, el) {
                    console.log($(this).attr("data-column"));
                    column = table.column($(this).attr("data-column"));
                    column.visible(!column.visible());
                });

                $("#all_asset_list_table").removeAttr("style");

            });

        });

        $(function () {
            const table = new DataTable('#all_asset_drafts_table', {
                processing: true,
                paging: false,
                serverSide: true,
                ajax: {
                    url: '{{ route("brandassetdetails.draftlist") }}',
                    type: 'GET'
                },
                columns: [
                    {data: 'displaycheckbox'},
                    {data: 'DT_RowIndex'},
                    {data: 'asset_name'},
                    {data: 'user_id'},
                    {data: 'cloud_space'},
                    {data: 'selling_cost'},
                    {data: 'impressions'},
                    {data: 'downloads'},
                    {data: 'totalearnings'},
                    {data: 'latestrevision'},
                    {data: 'discount'},
                    {data: 'discountprice'},
                    {data: 'festivaldiscount'},
                    {data: 'festivaldiscountprice'},
                    {data: 'displaystatus'},
                    {data: 'action',orderable: false, searchable: false}
                ]
            });


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

            let columnIdx = 10;
            let column = table.column(columnIdx);
            column.visible(!column.visible());

            columnIdx = 11;
            column = table.column(columnIdx);
            column.visible(!column.visible());

            columnIdx = 12;
            column = table.column(columnIdx);
            column.visible(!column.visible());

            columnIdx = 13;
            column = table.column(columnIdx);
            column.visible(!column.visible());

            $(document).on("click",'.draftscolumnfilter .ms-selection .ms-list li',function(){
                table.draw();
                table.columns().visible(false);
                var $target = $('.draftscolumnfilter .ms-selection .ms-list li.ms-selected');
                $target.each(function (index, el) {
                    console.log($(this).attr("data-column"));
                    column = table.column($(this).attr("data-column"));
                    column.visible(!column.visible());
                });

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

            $(document).on("click",'.draftscolumnfilter .ms-selectable .ms-list li',function(){
                table.draw();
                table.columns().visible(false);
                var $target = $('.draftscolumnfilter .ms-selection .ms-list li.ms-selected');
                $target.each(function (index, el) {
                    console.log($(this).attr("data-column"));
                    column = table.column($(this).attr("data-column"));
                    column.visible(!column.visible());
                });

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


        });

        $(function () {
            const table = new DataTable('#all_asset_publish_table', {
                processing: true,
                paging: false,
                serverSide: true,
                ajax: {
                    url: '{{ route("brandassetdetails.publishlist") }}',
                    type: 'GET'
                },
                columns: [
                    {data: 'displaycheckbox'},
                    {data: 'DT_RowIndex'},
                    {data: 'asset_name'},
                    {data: 'user_id'},
                    {data: 'cloud_space'},
                    {data: 'selling_cost'},
                    {data: 'impressions'},
                    {data: 'downloads'},
                    {data: 'totalearnings'},
                    {data: 'latestrevision'},
                    {data: 'discount'},
                    {data: 'discountprice'},
                    {data: 'festivaldiscount'},
                    {data: 'festivaldiscountprice'},
                    {data: 'displaystatus'},
                    {data: 'action',orderable: false, searchable: false}
                ]
            });


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

            let columnIdx = 10;
            let column = table.column(columnIdx);
            column.visible(!column.visible());

            columnIdx = 11;
            column = table.column(columnIdx);
            column.visible(!column.visible());

            columnIdx = 12;
            column = table.column(columnIdx);
            column.visible(!column.visible());

            columnIdx = 13;
            column = table.column(columnIdx);
            column.visible(!column.visible());

            $(document).on("click",'.publishcolumnfilter .ms-selection .ms-list li',function(){
                table.draw();
                table.columns().visible(false);
                var $target = $('.publishcolumnfilter .ms-selection .ms-list li.ms-selected');
                $target.each(function (index, el) {
                    console.log($(this).attr("data-column"));
                    column = table.column($(this).attr("data-column"));
                    column.visible(!column.visible());
                });

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

            $(document).on("click",'.publishcolumnfilter .ms-selectable .ms-list li',function(){
                table.draw();
                table.columns().visible(false);
                var $target = $('.publishcolumnfilter .ms-selection .ms-list li.ms-selected');
                $target.each(function (index, el) {
                    console.log($(this).attr("data-column"));
                    column = table.column($(this).attr("data-column"));
                    column.visible(!column.visible());
                });

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


        });


    </script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <script>


        $(document).ready(function(){
            $('#allassetcolumnfilter').multiSelect({ selectableOptgroup: true });
            $('#draftscolumnfilter').multiSelect({ selectableOptgroup: true });
            $('#publishcolumnfilter').multiSelect({ selectableOptgroup: true });

        });


    </script>

    <script>
        $(document).ready(function(){

            load_brand_list_currect_count();

        });
    </script>

    <script>
        function load_brand_list_currect_count()
        {

            $.ajax({
                url: '{{ route('brandassetdetails.listcount') }}',
                method: "POST",
                data: {
                    _token: '{{ csrf_token() }}',
                },
                success: function (response) {
                    $('#display_brand_all_asset_count').text('('+response.all_asset_count+')');
                    $('#display_brand_draft_asset_count').text('('+response.draft_asset_count+')');
                    $('#display_brand_publish_asset_count').text('('+response.publish_asset_count+')');
                }
            });
        }
    </script>

    <script>

        $(document).on('click','#clicktomoveassettrash',function()
        {

            var assettrashid=$(this).attr("assetid");

            Swal.fire({
                title: 'Are you sure?',
                text: "Asset move Trash!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, Move to Trash!',
                color:'black',
                background:'white',
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        type: "Get",
                        url: "{{ route('assetdetails.trash') }}"+'/'+assettrashid,
                        data: {
                            _token: '{{ csrf_token() }}',
                        },
                        success: function (response) {
                            load_brand_list_currect_count();
                            loadallassetdatatableactor()();
                            Swal.fire({
                                position: 'center',
                                icon: 'warning',
                                title: 'This Asset Trash Moved Successfully',
                                showConfirmButton: false,
                                timer: 2000
                            })
                        },
                        error: function (error) {
                            $('#all_asset_list_table').DataTable().ajax.reload();
                        }
                    });
                }
            })
        });

        function loadallassetdatatableactor()
        {
            $('#all_asset_list_table').DataTable().ajax.reload();
            $('#all_asset_drafts_table').DataTable().ajax.reload();
            $('#all_asset_publish_table').DataTable().ajax.reload();

        }

    </script>

@endsection