@extends('layouts.frontend')

@section('js_after')
    <script>
        //$('.error-message').hide();
        $(document).on('click','.create-new-list',function () {
            var scheme_input_count = $('.schemecode-input').length;
            if (scheme_input_count==0){
                $('.error-message').html('Please add scheme first!');
                //$('.error-message').show();
                setTimeout(function () {
                    $('.error-message').html('');
                   // $('.error-message').hide();
                },5000)
            }else {
                $('#saveCreateListModal').modal({
                    backdrop: 'static',
                    keyboard: false,
                    show: true
                });
            }
        });

        jQuery('#save_list_btn').click(function(e){
            e.preventDefault();

            var title = jQuery('#list_title').val();
            if(title.trim()==''){
                jQuery('#save_list_msg').removeClass('alert-success alert-danger');
                jQuery('#save_list_msg').addClass('alert-danger');
                jQuery('#save_list_msg').html('Please Enter List Name');
            }else{
                var schemecodes = $("input[name='schemecode[]']").map(function(){return $(this).val();}).get();

                jQuery('#save_list_msg').removeClass('alert-success alert-danger');
                jQuery('#save_list_msg').html('');
                jQuery('#list_title').val('');
                $('#saveCreateListModal').modal({
                    backdrop: 'static',
                    keyboard: false,
                    show: false
                });
                jQuery.ajax({
                    url: "{{ route('frontend.fundPerformancecrateMyList') }}",
                    method: 'post',
                    data: {
                        _token: "{{ csrf_token() }}",
                        title: title,
                        schemecodes: schemecodes
                    },
                    success: function(result){
                        jQuery('#save_cal_msg').removeClass('alert-success alert-danger');
                        jQuery('#save_cal_msg').addClass('alert-success');
                        jQuery('#save_cal_msg').html('Data Successfully Saved');
                        setTimeout(function () {
                            $('#saveCreateListModal').modal('toggle');
                            jQuery('#save_cal_msg').removeClass('alert-success alert-danger');
                            jQuery('#save_cal_msg').html('');
                        },1000);
                        $('table.suggested-scheme-details tbody').children( 'tr:not(:first)' ).remove();
                    }});
            }

        });
        $(".create-list-btn").click(function(){
            $(".create-list-container").toggle();
        });

        $(document).ready(function () {
            $('#myCustomListTable').DataTable( {
                searching: false,
                info: false,
                bLengthChange: false,
                pageLength: 20,
                columnDefs: [ {
                    "targets": 2,
                    "orderable": false
                } ]
            } );
        });

        $(document).on('click','.show-report-list',function () {
            var scheme_input_count = $('.schemecode-input').length;
            if (scheme_input_count==0){
                $('.error-message').html('Please add scheme first!');
                //$('.error-message').show();
                setTimeout(function () {
                    $('.error-message').html('');
                    // $('.error-message').hide();
                },5000)
            }else {
                $('form#custom-list-form').submit();
            }
        });
    </script>

@endsection

@section('content')
    <div class="banner">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center">
                    <h2 class="page-title">CALCULATORS CUM CLIENT PROPOSALS</h2>
                </div>
            </div>
        </div>
    </div>
    <section class="main-sec">
        <div class="container">
            <div class="row">
                @include('frontend.calculators.left_sidebar')
                <div class="col-md-12">
                    <div class="row">

                        <div class="col-md-12 mb-3">
                            <div class="stage">
                                <div class="text-center">
                                    <button class="btn btn-success btn-round create-list-btn d-block-sm" title="">
                                        <i class="fa fa-plus" aria-hidden="true"></i> Create New List
                                    </button>

                                    <a href="{{route('frontend.fundPerformanceCategorywise')}}" class="btn btn-primary btn-round d-block-sm">Go to Category Wise List</a>
                                    @if(isset($instruction))
                                    <a class="btn btn-info btn-round d-block-sm" href="javascript:void(0)" data-toggle="modal" data-target="#myCustomListInstruction">Instructions</a>
                                    @endif
                                </div>
                                <div class="row mb-3 text-center create-list-container" style="display: none">
                                    <form id="custom-list-form" action="{{route('frontend.fundPerformanceMylistOutput')}}" method="post">
                                        @csrf
                                    <div class="col-md-12 mt-3">
                                        <h4 class="">CREATE NEW LIST</h4>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="table-responsive fund-performance-table mt-3" style="min-width:1140px;width: 100%; position: relative;">
                                            <table class="table table-bordered w-100 suggested-scheme-details" style="display: none">
                                                <tbody>
                                                <tr>
                                                    <th style="width: 20%;background: #a9f3ff;">Scheme Name</th>
                                                    <th style="width: 10%;background: #a9f3ff;">Asset&nbsp;Type</th>
                                                    <th style="width: 20%;background: #a9f3ff;">Category</th>
                                                    <th style="width: 50%;background: #a9f3ff;" colspan="8">Return</th>
                                                    <th style="width: 5%;background: #a9f3ff;">Action</th>
                                                </tr>


                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="table-responsive fund-performance-table" style="width: 100%;min-width:1140px; position: relative;">
                                            <table class="table table-bordered w-100" style="width: 100%;min-width:1140px;">
                                                <tbody>
                                                <tr>
                                                    <td style="width: 10%;">Direct&nbsp;/&nbsp;Regular</td>
                                                    <td style="width: 15%;">Asset&nbsp;Type</td>
                                                    <td style="width: 15%;">AMC Name</td>
                                                    <td style="width: 12%;">Category</td>
                                                    <td style="width: 12%;">Type</td>
                                                    <td>Scheme Name</td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <select class="form-control" name="option" id="option">
                                                            <option value="regular"> Regular </option>
                                                            <option value="direct"> Direct </option>
                                                        </select>
                                                    </td>
                                                    <td>
                                                        <select class="form-control" name="asset" id="asset" onchange="getCategory()">

                                                        </select>
                                                    </td>
                                                    <td>
                                                        <select class="form-control" name="fund" id="fund" onchange="getCategory()">

                                                        </select>
                                                    </td>
                                                    <td>
                                                        <select class="form-control" name="category" id="category">

                                                        </select>
                                                    </td>

                                                    <td>
                                                        <select class="form-control" name="type" id="type">
                                                            <option value="growth">Growth</option>
                                                            <option value="dividend">Dividend</option>
                                                        </select>
                                                    </td>
                                                    <td>
                                                        <select class="form-control js-example-basic-single" name="scheme" id="scheme">

                                                        </select>
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="col-md-12 mb-3 text-center">
                                        <button type="button" class="btn btn-primary btn-round show-report-list">Publish Report</button>
                                        <div class="error-message text-danger ml-5"></div>
                                    </div>
                                        
                                    </form>
                                </div>

                                <div class="col-md-12 text-center mt-5">
                                    <h4 class="">MY LIST</h4>
                                </div>
                                <div class="table-responsive">
                                    <table id="myCustomListTable" class="table table-bordered text-center">
                                        <thead>
                                        <tr>
                                            <th scope="col" style="width: 25%;">DATE</th>
                                            <th scope="col" style="width: 40%; text-align: left;">LIST NAME</th>
                                            <th scope="col" style="width: 35%;">ACTION</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @if(isset($my_save_lists) && count($my_save_lists)>0)
                                            @foreach($my_save_lists as $svlist)
                                                <tr>
                                                    <td><span style="display:none;">{{strtotime($svlist['created_at'])}}</span>{{date('d/m/Y',strtotime($svlist['created_at']))}}</td>
                                                    <td style="text-align: left;">{{$svlist['title']}}</td>
                                                    <td>
                                                        <a href="{{route('frontend.mylistSaveShow',['id'=>$svlist['id']])}}" class="btn btn-success btn-sm" title="View">
                                                            <i class="fas fa-eye"></i>
                                                        </a>
                                                        <a href="{{route('frontend.mylistSaveDownload',['id'=>$svlist['id']])}}" target="_blank" class="btn btn-primary btn-sm" title="Download">
                                                            <i class="fas fa-download"></i>
                                                        </a>
                                                        <a href="{{route('frontend.mylistSaveDelete',['id'=>$svlist['id']])}}" class="btn btn-danger btn-sm" onclick="return confirm('Are you sure?')" title="Delete">
                                                            <i class="fas fa-trash-alt"></i>
                                                        </a>

                                                    </td>
                                                </tr>
                                            @endforeach
                                        @endif
                                        </tbody>
                                    </table>
                                </div>

                            </div>

                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="btm-shape-prt">
            <img class="img-fluid" src="{{url('/')}}/f/images/shape2.png" alt="" />
        </div>
    </section>

    @if(isset($instruction))
    <div id="myCustomListInstruction" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" >{{$instruction['title']}}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    {!! $instruction['content'] !!}
                </div>
            </div>
        </div>
    </div>
    @endif

    <div class="modal fade" id="saveCreateListModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" >SAVE CREATE LIST</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <input type="text" class="form-control" id="list_title" autocomplete="off" placeholder="Enter List Name">
                    </div>
                    <div id="save_list_msg" class="alert ">

                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary btn-round" id="save_list_btn">Save</button>
                </div>
            </div>
        </div>
    </div>
@endsection