@extends('actor.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_actor_all_asset_count"></span> </a></li>
                            <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#drafts">Drafts <span id="display_actor_draft_asset_count"></span></a></li>
                            <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#publish">Publish <span id="display_actor_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="text" class="form-control" id="assetallsearchdata" placeholder="Search"> </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</option>
                                                        <option selected data-column="3">Actor ID</option>
                                                        <option selected data-column="4">Cloud Space</option>
                                                        <option selected data-column="5">Selling Price</option>
                                                        <option selected data-column="6">Discount </option>
                                                        <option data-column="7">Discount Price</option>
                                                        <option selected data-column="8">Festival discount</option>
                                                        <option selected data-column="9">Offer Price</option>
                                                        <option data-column="10">Impressions</option>
                                                        <option selected data-column="11">Downloads</option>
                                                        <option selected data-column="12">Total Earnings </option>
                                                        <option selected data-column="13">Latest Revision</option>
                                                        <option selected data-column="14">Status</option>
                                                        <option selected data-column="15">Notification</option>
                                                        <option selected data-column="16">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</th>
                                            <th>Actor ID</th>
                                            <th>Cloud Space</th>
                                            <th>Selling Price</th>
                                            <th>Discount </th>
                                            <th>Discount Price</th>
                                            <th>Festival Discount</th>
                                            <th>Offer Price</th>
                                            <th>Impressions</th>
                                            <th>Downloads</th>
                                            <th>Total Earnings</th>
                                            <th>Latest Revision</th>
                                            <th>Status</th>
                                            <th>Notification</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="text" class="form-control" id="assetalldraftsearchdata" placeholder="Search"> </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</option>
                                                        <option selected data-column="3">Actor ID</option>
                                                        <option selected data-column="4">Cloud Space</option>
                                                        <option selected data-column="5">Selling Price</option>
                                                        <option selected data-column="6">Discount </option>
                                                        <option data-column="7">Discount Price</option>
                                                        <option selected data-column="8">Festival discount</option>
                                                        <option selected data-column="9">Offer Price</option>
                                                        <option data-column="10">Impressions</option>
                                                        <option data-column="11">Downloads</option>
                                                        <option data-column="12">Total Earnings </option>
                                                        <option data-column="13">Latest Revision</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</th>
                                            <th>Actor ID</th>
                                            <th>Cloud Space</th>
                                            <th>Selling Price</th>
                                            <th>Discount </th>
                                            <th>Discount Price</th>
                                            <th>Festival Discount</th>
                                            <th>Offer Price</th>
                                            <th>Impressions</th>
                                            <th>Downloads</th>
                                            <th>Total Earnings</th>
                                            <th>Latest Revision</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="text" class="form-control" id="assetallpublishsearchdata" placeholder="Search"> </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</option>
                                                        <option selected data-column="3">Actor ID</option>
                                                        <option selected data-column="4">Cloud Space</option>
                                                        <option selected data-column="5">Selling Price</option>
                                                        <option selected data-column="6">Discount </option>
                                                        <option data-column="7">Discount Price</option>
                                                        <option selected data-column="8">Festival discount</option>
                                                        <option selected data-column="9">Offer Price</option>
                                                        <option data-column="10">Impressions</option>
                                                        <option selected data-column="11">Downloads</option>
                                                        <option selected data-column="12">Total Earnings </option>
                                                        <option selected data-column="13">Latest Revision</option>
                                                        <option selected data-column="14">Status</option>
                                                        <option selected data-column="15">Notification</option>
                                                        <option selected data-column="16">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</th>
                                            <th>Actor ID</th>
                                            <th>Cloud Space</th>
                                            <th>Selling Price</th>
                                            <th>Discount </th>
                                            <th>Discount Price</th>
                                            <th>Festival Discount</th>
                                            <th>Offer Price</th>
                                            <th>Impressions</th>
                                            <th>Downloads</th>
                                            <th>Total Earnings</th>
                                            <th>Latest Revision</th>
                                            <th>Status</th>
                                            <th>Notification</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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <div class="modal" id="createassetmodal">
        <div class="modal-dialog modal-md modal-dialog-centered">
            <div class="modal-content">

                <form method="POST" id="assetcreatedetailsstoreform">

                    @csrf

                    <!-- Modal Header -->
                    <div class="modal-header">
                        <h5 class="modal-title">Create Asset</h5>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <!-- Modal body -->
                    <div class="modal-body">


                        <div class="row">

                            <div class="col-md-12">
                                <div class="form-group">
                                    <label>Asset ID</label>
                                    <input type="text" name="asset_id" id="displayassetid" class="form-control"  placeholder="Asset ID"  readonly>
                                </div>
                            </div>


                            <div class="col-md-12">
                                <div class="form-group">
                                    <label>Asset Name *</label>
                                    <input type="text" required  id="assetnamecountcheck" class="form-control " name="asset_name" placeholder="Asset Name">
                                </div>
                            </div>

                            <style>
                                .select2-results__options {
                                    max-height: 500px ! important;
                                }
                                table.dataTable tbody tr td:nth-child(3) {
                                    padding: 0px;
                                }
                                .displaydatableassetiddesign {
                                    color: #2790f4;
                                }
                            </style>



                        </div>

                    </div>

                    <!-- Modal footer -->
                    <div class="modal-footer">
                        <button type="submit"  class="btn btn-primary text-right" id="createassetsubmitbutton">Create Asset</button> &nbsp;
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                    </div>


                </form>

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

    @include('actor.common_script.assetjs')


@endsection