@extends('layouts.app')
@section('styles')
<link rel="stylesheet" href="{{ asset('assets/web/css/user-panel.css') }}">
@endsection
@section('content')
<section>
    <div class="main-wrapper" style="min-height: calc(100vh - 516px);">
        <div class="pt-50 pb-50 section--bg">
            <div class="container">
                <div class="row justify-content-center gy-4">
                    <div class="col-xl-3 col-lg-3 col-md-3 col-3">
                        @include('include.employer-side-nav')
                    </div>
                    <div class="col-xl-9 col-lg-9 col-md-9 ps-xl-4 col-9">
                        <div class="row gy-4">
                            <div class="col-xl-4 col-lg-4 col-md-6 mb-30">
                                <div class="d-widget style--two d-flex flex-wrap align-items-center">
                                    <div class="d-widget__content">
                                        <h3 class="d-number">{{$jobCount}}</h3>
                                        <span class="caption fs--14px">Total Jobs</span>
                                    </div>
                                    <div class="d-widget__icon border-radius--100">
                                        <i class="las la-tasks"></i>
                                        <a href="{{ url('/employer/all/jobs') }}" class="d-widget__btn mt-2">View all</a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-4 col-lg-4 col-md-6 mb-30">
                                <div class="d-widget style--two d-flex flex-wrap align-items-center">
                                    <div class="d-widget__content">
                                        <h3 class="d-number">{{getAmount($totalDeposit)}}</h3>
                                        <span class="caption fs--14px">Total Deposit</span>
                                    </div>
                                    <div class="d-widget__icon border-radius--100">
                                        <i class="las la-wallet"></i>
                                        <a href="{{ url('/employer/deposit/history') }}" class="d-widget__btn mt-2">View all</a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-4 col-lg-4 col-md-6 mb-30">
                                <div class="d-widget style--two d-flex flex-wrap align-items-center">
                                    <div class="d-widget__content">
                                        <h3 class="d-number">{{getAmount($employer->balance)}}</h3>
                                        <span class="caption fs--14px">Employer Balance</span>
                                    </div>
                                    <div class="d-widget__icon border-radius--100">
                                        <i class="lar la-credit-card"></i>
                                        <a href="{{ url('/employer/transactions') }}" class="d-widget__btn mt-2">View all</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @if($errors->any())
                            @foreach ($errors->all() as $error)
                                <div>{{$error}}</div>
                            @endforeach
                        @endif
                        @if(session()->has('message'))                      
                            <div class="alert alert-success">
                                {{ session()->get('message') }}
                            </div>
                        @endif
                        <div class="row justify-content-center gy-4">
                            <div class="col-xl-12 col-lg-12">
                                <div class="custom--card mt-4">
                                    <div class="card-body px-4">
                                        <div class="table-responsive--md">
                                            <table class="table custom--table">
                                                <thead>
                                                    <tr>
                                                        <th>Plan Name</th>
                                                        <th>Order Number</th>
                                                        <th>Amount</th>
                                                        <th>Total Job Post</th>
                                                        <th>Expired Date</th>
                                                        <th>Status</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @forelse($planOrders as $planOrder)
                                                        <tr>
                                                            <td data-label="@lang('Plan Name')">
                                                                {{__($planOrder->plan->name)}}
                                                            </td>
                                                            <td data-label="@lang('Order Number')">{{$planOrder->order_number}}</td>
                                                            <td data-label="@lang('Amount')">{{getAmount($planOrder->amount)}} </td>
                                                            <td data-label="@lang('Total Post')">{{$planOrder->plan->job_post}}</td>
                                                            <td data-label="@lang('Expired Date')">{{showDateTime($planOrder->created_at->addMonths($planOrder->plan->duration), 'd M Y')}}</td>
                                                            <td data-label="@lang('Status')">
                                                                @if($planOrder->status == 1)
                                                                    <span class="badge badge--success">@lang('Paid')</span>
                                                                @elseif($planOrder->status == 2)
                                                                    <span class="badge badge--danger">@lang('Expired')</span>
                                                                @endif
                                                            </td>
                                                        </tr>
                                                    @empty
                                                        <tr>
                                                            <td colspan="100%" class="text-center">{{ __($emptyMessage) }}</td>
                                                        </tr>
                                                    @endforelse
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row gy-4 justify-content-center mt-4">
                            <h5 class="text-center">You can create {{$employer->job_post_count}} job post</h5>
                            @foreach($plans as $plan)
                                <div class="col-xl-6 col-lg-6 col-md-6">
                                    <div class="package-card">
                                        <div class="package-card__top">
                                            <div class="icon">
                                                @php echo $plan->icon @endphp
                                            </div>
                                            <div class="content">
                                                <h3 class="package-card__name">{{__($plan->name)}}</h3>
                                                <div class="package-card__price">{{getAmount($plan->amount)}} <sub>/ {{__($plan->duration)}} @lang('month')</sub></div>
                                            </div>
                                        </div>
                                        <div class="package-card__content">
                                            <ul class="package-card__feature-list">
                                                <li>@lang('You can create') <span class="badge badge--base">{{$plan->job_post}} @lang('job posts')</span></li>
                                                @foreach($plan->services as $value)
                                                    @php 
                                                        $service = App\Models\Service::find($value) 
                                                    @endphp
                                                    <li>{{__($service->name)}}</li>
                                                @endforeach
                                            </ul>
                                        </div>
                                        <div class="package-card__footer">
                                            <a href="javascript:void(0)" data-toggle="modal" data-plan_id="{{$plan->id}}" data-target="#exampleModal" class="btn btn--dark w-100 mt-4 planSubscribe">@lang('Choose Plan')</a>
                                        </div>  
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade custom--modal" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <form method="POST" action="{{ url('/plan/subscribe') }}">   
                        @csrf       
                        <input type="hidden" id="plan_id" name="plan_id">              
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">Subscribe Plan</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            Are you sure you want to subscribe this plan? <div class="form-group mt-3">
                                <select class="form--control" name="payment" required="">
                                    <option value="">Select One</option>
                                    <option value="1">JobLab Wallet</option>
                                    <option value="2">Checkout</option>
                                </select>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn--secondary btn-sm"
                                data-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn--primary btn-sm">Confirm</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection
@section('scripts')
<script>   
    $('.planSubscribe').on('click', function(){
        var modal = $('#exampleModal');
        modal.find('input[name=plan_id]').val($(this).data('plan_id'));
	})
</script>
@endsection