@extends('layouts.master')

@section('title') {{__('admin.dashboard')}} -@endsection
@section('css')
<link href="{{ asset('public/css/wph.css') }}" rel="stylesheet">
<link href="{{ asset('public/css/automixer.min.css') }}" rel="stylesheet">


@endsection
@section('content')

<section class="section section-sm">
    <div class="container-fluid">
        <div class="row mt-4">
            <div class="col-md-12 col-lg-12">
           <div class="main-body">
    <main class="page-main container">
        <header class="page-header">
            <h1 class="page-header-title">Celebrity Info Requests</h1>
        </header>
        <!-- / Page Header -->
        <div id="wph-wrap-all" class="container">
            <div id="content">
                <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
                    <li class="active"><a href="#add-new" data-toggle="tab">Add New Celebrity</a></li>
                    <li><a href="#status" data-toggle="tab">Request Status</a></li>
                </ul>

                <div id="my-tab-content" class="tab-content">
                    <div class="tab-pane active" id="add-new">
                        <div class="requests-progress-info main-requests-progress">
                            <div class="requests-progress-message"><span class="number-requested-contacts">{{$userRequests->count()}}</span> of <span class="requests-limit">{{$user->activeSubscription?->request_info ?? 0}}</span> requests submitted today.</div>

                            <div class="requests-progress-bar">
                                <div class="requests-progress-bar-container" style="max-width: 100%; width: 0%;"></div>
                            </div>
                        </div>

                        <i class="addInfo">You can submit a maximum of {{$user->activeSubscription?->request_info ?? 0}} celebrity name(s) per day.</i>

                        <form id="addCelebrity" method="post" action="{{route('user.request.info.add')}}">
                            @csrf
                            <table class="table table-bordered" id="add_celebrity">
                                <tbody>
                                    <tr>
                                        <td style="width: 150px;"><label class="new-celebrity">Celebrity Name :</label></td>
                                        <td><input type="text" name="artist_name" class="form-control" /></td>
                                        <td><textarea class="form-control" title="Add additional celebrity details, such as company name, profession, social media link." placeholder="Add additional celebrity details, such as company name, profession, social media link." name="artist_details"></textarea></td>
                                      
                                    </tr>
                                </tbody>
                            </table>
                          @if($allowRequest)
                            <div class="formButton">
                                <a id="add_row" class=" pull-left al-grey-button"></a>
                                <input type="submit" name="submit" class="btn btn-info pull-right al-yellow-button" value="Send Request" />
                                <div class="col-md-3 pull-right" id="ajaxLoader" style="display: none;">
                                    <img class="pull-right" style="margin-top: -6px;" src="https://bookingagentinfo.com/wp-content/plugins/add-celebrity-plugin/ajax-loader-standard.gif" width="100" height="48" alt="ajax-loader" />
                                </div>
                            </div>
                          @endif
                        </form>

                        <div class="messages">
                            <div class="alert alert-success" role="alert" id="mailSuccess" style="display: none;">
                                <p>Successfully Sent your Request.</p>
                            </div>

                            <div class="alert alert-warning" role="alert" id="mailWarning" style="display: none;">
                                <p>Empty Values Found. Please Try Again.</p>
                            </div>

                            <div class="alert alert-danger" role="alert" id="mailErrors" style="display: none;">
                                <p>Some fields are empty. Please try again</p>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="status">
                        <table class="table" id="al-request-status-table">
                            <thead>
                                <tr>
                                    <th>Celebrity Name</th>
                                    <th>Details</th>
                                    <th>Submission Date</th>
                                    <th>Status</th>
                                </tr>
                            </thead>

                            <tbody data-empty="1">
                                @forelse($userRequests as $uRequest)
                                <tr>
                                    
                                    <td>{{$uRequest->artist_name}}</td>
                                    <td>{{$uRequest->artist_details}}</td>
                                    <td>{{__date_parse($uRequest->created_at, 'M d, Y')}}</td>
                                    <td>{!!request_status_badge($uRequest->status)!!}</td>
                                </tr>
                                 @empty
                                 <tr>
                                    <td colspan="4">No submissions found</td> 
                                 </tr>
                                    
                                    @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        @if(!$allowRequest)
        <div id="wph-wrap-all">
            <div class="alert alert-warning" role="alert">
                <p>Upgrade your account to submit requests.</p>
            </div>
        </div>
        @endif
    </main>
</div>

                
            </div>
            
        </div>

    </div>
  </section>
@endsection