@extends('user.layouts.master')
@section('history-active', 'active')
@section('content')
    <style>
        .navbar {
            background-color: black !important
        }

        .side-dashboard {
            min-height: 82vh !important;
        }

        .modal-header {
            background: #fff !important;
        }

        @media (max-width: 418px) {
            .modal-dialog {
                width: 90% !important;

            }
        }

        .rep {
            color: red;
        }
        @media(max-width:922px)
        {
            .dashboard-wrap{
                height: 90vh;
            }
        }
    
    </style>
    <section class="dashboard-wrap">
        <div class="container-fluid">
            <div class="row">

                <!-- Sidebar Wrap -->
                @include('user.layouts.afterlogin_sidebar')


                <!-- Content Wrap -->
                <div class="col-lg-9 col-md-8 ">
                    <div class="dashboard-body">
                        <div class="dashboard-caption">
                            @if (session('success'))
                                <div class="alert alert-success">{{ session('success') }}</div>
                            @endif
                            <div class="dashboard-caption-header">
                                <h4><i class="ti-history"></i>Report History</h4>
                                <button class="btn-primary" data-toggle="modal" data-target="#ReportForm">
                                    Report</button>
                            </div>

                            <div class="dashboard-caption-wrap">

                                <!-- row -->
                                <div class="row mrg-top-20">
                                    <div class="table-responsive">
                                        <table id="example" class="table table-striped table-bordered" style="width:100%;">
                                            <thead>
                                                <tr>
                                                    <th>Created Date</th>
                                                    <th>User</th>
                                                    <th>Platform</th>
                                                    <th>Email</th>
                                                    <th>Phone</th>
                                                    <th>Status</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($history as $histories)
                                                    <tr id="reportid{{ $histories->id }}">
                                                        @if($histories->status=='deleted')
                                                        <td>
                                                            {{ \Carbon\Carbon::parse($histories->created_at->toDateString())->format('m/d/Y') }}
                                                        </td>
                                                        <td>{{ $histories->user_name }}</td>
                                                        <td>{{ $histories->payment_type }}</td>
                                                        <td>{{ $histories->email }}</td>
                                                        <td>{{ $histories->number_format1 }}</td>
                                                            @if ($histories->is_type == 'approve')
                                                                <td class="alert alert-success">Approved</td>
                                                            @elseif($histories->is_type == 'pending')
                                                                <td class="alert alert-warning">Pending</td>
                                                            @else
                                                                <td class="alert alert-danger">Denied</td>
                                                            @endif
                                                        <td><a class="btn-danger btn-sm delete"
                                                                data-id=""><i
                                                                    class="fa fa-trash"></i></a>
                                                                    <a class="btn-success btn-sm " href="{{ route('report.detail', ['id' => $histories->id]) }}">View</a>
                                                                </td>
                                                    </tr>
                                                    @endif
                                                @endforeach

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

                                </div>
                            </div>

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

            </div>
        </div>
    </section>
    <!-- Modal HTML Markup -->
    <div id="ReportForm" class="modal fade">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">

                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    @if (Auth::guard('user')->check())
                        <form action="{{ route('report.process') }}" method="post" enctype=multipart/form-data>
                        @else
                            <form action="{{ route('post.process.before.login') }}" method="post"
                                enctype=multipart/form-data>
                    @endif

                    @csrf
                    <div class="row">
                        <div class="col-md-6 col-sm-6">
                            <div class="form-group">
                                <label>First Name</label>
                                <div class="input-with-icon">
                                    <input type="text" name="first_name" class="form-control"
                                        value="{{ old('first_name') }}" />
                                    <i class="theme-cl fa fa-user"></i>
                                </div>
                                <div class="error">{{ $errors->first('first_name') }}</div>
                            </div>
                        </div>
                        <div class="col-md-6 col-sm-6">
                            <div class="form-group ">
                                <label>Email</label>
                                <div class="input-with-icon">
                                    <input type="email" name="email" class="form-control" value="{{ old('email') }}" />
                                    <i class="theme-cl fa fa-envelope"></i>

                                </div>
                                <div class="error">{{ $errors->first('email') }}</div>

                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 col-sm-6">
                            <div class="form-group">
                                <label>Last Name</label>
                                <div class="input-with-icon">
                                    <input type="text" name="last_name" class="form-control"
                                        value="{{ old('last_name') }}" />
                                    <i class="theme-cl fa fa-user"></i>
                                </div>
                                <div class="error">{{ $errors->first('last_name') }}</div>
                            </div>
                        </div>


                        <div class="col-md-6 col-sm-6">
                            <div class="form-group ">
                                <label>Phone Number</label>
                                <div class="input-with-icon">
                                    <input type="tel" id="phoneNumber" name="phone_number" class="form-control"
                                        value="{{ old('phone_number') }}" />
                                    <i class="theme-cl fa fa-phone"></i>
                                </div>
                                <div class="error">{{ $errors->first('phone_number') }}</div>

                            </div>
                        </div>

                    </div>
                    <div class="row">

                        <div class="col-md-6 col-sm-6">
                            <div class="form-group">
                                <label>Username</label>
                                <div class="input-with-icon">
                                    <input type="text" name="user_name" class="form-control"
                                        value="{{ old('user_name') }}" />
                                    <i class="theme-cl fa fa-user"></i>
                                </div>
                                <div class="error">{{ $errors->first('user_name') }}</div>

                            </div>
                        </div>

                        <div class="col-md-6 col-sm-6">
                            <div class="form-group">
                                <label>Type</label>
                                <div class="input-with-icon">

                                    <select name="payment_type" id="abc" class="form-control">
                                        <option disabled selected>Choose Type</option>
                                        <option value="Venmo">Venmo</option>
                                        <option value="Zelle">Zelle</option>
                                        <option value="Paypal">Paypal</option>
                                        <option value="Cashapp">Cashapp</option>
                                        <option value="Googlepay">Googlepay</option>
                                        <option value="FaceBookMessenger">FaceBook Messenger</option>
                                        <option value="other">Other</option>
                                    </select>
                                    <div class="error">{{ $errors->first('payment_type') }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row" id="myClass">
                        <div class="col-md-12 col-sm-12">
                            <div class="form-group">
                                <label>Other</label>
                                <div class="input-with-icon">
                                    <input type="text" name="description" class="form-control"
                                        value="{{ old('description') }}" />
                                    <i class="theme-cl fa fa-pencil"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12 col-sm-6">
                            <div class="form-group">
                                <label>Attachments <span class="rep">*</span></label>
                                <div class="input-with-icon">
                                    <input type="file" name="image[]" class="form-control" style="padding-top: 17px;"
                                        multiple required />
                                    <div class="text-danger">{{ $errors->first('image') }}</div>

                                    <i class="theme-cl fa fa-image"></i>
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12 col-sm-12">
                            <div class="form-group">
                                <label>Comments <span class="rep">*</span></label>
                                <div class="input-with-icon">
                                    <textarea name="notes" class="form-control" required
                                        rows="1">{{ old('notes') }}</textarea>
                                    <i class="theme-cl fa fa-note"></i>
                                </div>
                                <div class="error">{{ $errors->first('notes') }}</div>

                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12 col-sm-12">
                            <div class="form-groups">
                                <button type="submit" class="btn btn-primary theme-bg full-width">Submit</button>
                            </div>
                        </div>
                    </div>
                    </form>

                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

    {{-- Delete Report With Reason --}}
    <div id="deleteform" class="modal fade">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">

                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form action="{{route('soft.deleted')}}" method="post">
                    @csrf
                    <input type="hidden" name="id" @if(!empty($histories))value="{{$histories->id}}"@endif>

                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12 col-sm-12">
                            <div class="form-group">
                                <label>Delete Report</label>
                                <div class="input-with-icon">
                                    <select name="reason" id="xyz" class="form-control">
                                        <option value="Reported by mistake">Reported by mistake</option>
                                        <option value="Problem was resolved">Problem was resolved </option>
                                        <option value="Other">Other</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row" id="asf">
                        <div class="col-md-12 col-sm-12">
                            <div class="form-group">
                                <label>Other</label>
                                <div class="input-with-icon">
                                    <input type="text" name="full_reason" class="form-control"
                                        value="" />
                                    <i class="theme-cl fa fa-pencil"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12 col-sm-12">
                            <div class="form-groups">
                                <button type="submit" class="btn btn-primary theme-bg full-width">Submit</button>
                            </div>
                        </form>
                        </div>
                    </div>


                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    {{-- Delete Report With Reason --}}

@endsection
@section('linkss')
    {{-- <link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap4.min.css" /> --}}
@endsection
@push('scripts2')
    <script>
        $(document).ready(function() {
            check = "{{ old('notes') }}";
            check_id = "{{ old('id') }}";
            if (check != "" && check_id == '') {
            }

            $("#myClass").hide();
            $('#abc').change(function() {
                if ($('#abc').val() == 'other') {
                    $('#myClass').show();
                } else {
                    $('#myClass').hide();
                }
            });
            $("#asf").hide();
            $('#xyz').change(function() {
                if ($('#xyz').val() == 'Other') {
                    $('#asf').show();
                } else {
                    $('#asf').hide();
                }
            });
            var table = $('#example').DataTable({
                responsive: true
            });

            // new $.fn.dataTable.FixedHeader( table );
            //     $('#example').DataTable( {
            //     responsive: true,
            //     columnDefs: [
            //         { responsivePriority: 1, targets: 0 },
            //         { responsivePriority: 2, targets: -1 }
            //     ]
            // } );
        });
    </script>
    <script>
        $(document).ready(function() {
            $('#example').DataTable();
        });

        $(document).on("click", ".delete", function() {
            if ($('#deleteform').modal('show')) {
                

                // id = $(this).data("id");
                // $.ajax({
                //     url: 'history-delete/' + id,
                //     type: 'GET',
                //     data: {
                //         _token: $('input[name=_token]').val()

                //     },
                //     success: function(response) {
                //         $('#reportid' + id).remove();
                //     }

                // })
            }
        })
    </script>
    {{-- <script type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap4.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/fixedheader/3.2.0/js/dataTables.fixedHeader.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.9/js/responsive.bootstrap.min.js"></script> --}}

@endpush