@extends('layouts.master')
@section('data-sidebar')
    <div id="product-cl-sec">
        <a id="pl-close" class="close-btn-pl"></a>
        <div class="pro-header-text"><span class="main_heading">New Report</span> <span id="opp_name"></span></div>

        <div class="loader-sell360" id="dataSidebarLoader" style="display:none; height:80vh">
            <div class="loader-set"> <span class="box-icon"></span> <span class="box-icon"></span>
                <div class="loader-img"> <img src="/images/sell-360-logo.svg" alt=""> </div>
                <span class="txt"><span></span> LOADING...</span> </div>
        </div>
        <div class="pc-cartlist">
            <div class="overflow-plist">
                <div class="plist-content">
                    <div class="_left-filter p-0">
                        <div class="container">
                            <div class="row">
                                <div class="col-12">
                                    <form style="display: flex;" id="saveReportForm" enctype="multipart/form-data">
                                        @csrf
                                        <input type="hidden" id="id" name="id" >
                                        <input type="hidden" id="operation" name="operation" value="add" >
                                        <input type="hidden" id="old_pic" name="old_pic">

                                        <div id="floating-label" class="card p-20 top_border mb-3 subCat_form_div"
                                             style="width: 100%;">
                                            <div class="form-wrap p-0">
                                                <div class="row">
                                                    <div class="col-md-12 pt-10">
                                                        <div class="form-group">
                                                            <label class="control-label mb-10">Title*</label>
                                                            <input type="text" name="title" id="title" class="form-control report_required_fields">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="form-s2 pt-10"><label class="font12 mb-5">Section*</label>
                                                            <select name="section_id" id="section_id" class="form-control formselect report_required_fields">
                                                                <option value="" selected > Select Section</option>
                                                                @foreach($sections as $row)
                                                                    <option value="{{$row->id}}"> {{$row->section_title}}</option>
                                                                @endforeach

                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-12 pt-10">
                                                        <div class="form-group">
                                                            <label class="control-label mb-10">URL*</label>
                                                            <input type="text" name="url" id="url" class="form-control report_required_fields">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-12 pt-10">
                                                        <div class="form-group">
                                                            <label class="control-label mb-10">Icon</label>
                                                            <input type="file" name="icon" id="icon" class="form-control">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="_cl-bottom">
            <button type="button" class="btn btn-primary mr-2" id="saveReport">Save</button>
            <button id="pl-close" type="button" class="btn btn-cancel mr-2" id="cancelReports">Cancel</button>
        </div>
    </div>
@endsection
@section('content')
    <div class="row mt-2 mb-3">
        <div class="col-lg-6 col-md-6 col-sm-6">
            <h2 class="_head01">Report <span>Management</span></h2>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-6">
            <ol class="breadcrumb">
                <li><a href="#"><span>User Reports</span></a></li>
                <li><span>Active</span></li>
            </ol>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="header">
                    <h2>List</h2>
                    <a class="btn add_button addReport"
                       style="right:0px; top:-7px;"><i class="fa fa-plus"></i> New Report</a> </h2>
                </div>

                <div class="loader-sell360" id="tblLoader">
                    <div class="loader"> <span class="box-icon"></span> <span class="box-icon"></span>
                        <div class="loader-img"> <img src="/images/sell-360-logo.svg" alt=""> </div>
                        <span class="txt"><span></span> LOADING...</span> </div>
                </div>

                <div class="body reports_div" style="display: none" id="reports_div">
                </div>
            </div>
        </div>
    </div>

@endsection
@push('scripts')
    <script src="/js/custom/reports-listing.js"></script>
@endpush