@extends($activeTemplate.'layouts.master')
@section('content')
<section class="col-xl-9 pb-50 section--bg">
    <div class="container">
        <div class="row gy-4">
            <div class="col-xl-12 col-lg-12 pe-lg-4">
                <h4 class="job-summary__title">@lang('Job Details')</h4>
                <div class="job-details bg-white">
                    <div class="row">
                        <div class="col-10">
                            <h2 class="job-details__title">{{__(@$job->title)}}</h2>
                            <p class="mt-1"><strong>{{__(@$job->employer->company_name)}}</strong></p>
                        </div>
                        <div class="col-2 text-end">
                            @auth
                            <a data-bs-toggle="tooltip" data-bs-title="@lang('Add to favourite')" href="{{route('user.favorite.item', $job->id)}}" class="bookmark-btn mt-2">
                                <span class="non-bookmark"><i class="far fa-bookmark"></i></span>
                            </a>
                            @endauth
                        </div>
                    </div>
                    <ul class="job-summary__list">
                        <li class="d-flex justify-content-between flex-wrap">
                            <strong>@lang('Published on'):</strong> {{showDateTime($job->created_at, 'd M Y')}}
                        </li>

                        <li class="d-flex justify-content-between flex-wrap"><strong>@lang('Application Deadline'):</strong> {{showDateTime($job->deadline, 'd M Y')}}</li>
                    </ul>
                    <hr>
                    <h3 class="mt-4 mb-2">@lang('Description')</h3>
                    <div> @php echo $job->description @endphp </div>
                    <hr>
                    <h3 class="mt-4 mb-2">@lang('Requirements')</h3>
                    <div>@php echo $job->requirements @endphp</div>
                    <hr>
                    <div class="text-center">
                    @auth
                        @if($applied)
                        <button type="button" disabled  class="btn btn-md px-4 btn--base mt-4">@lang('Already Applied')</button>
                        @else
                        <div class="text-center">
                            <span style="color: red;">Be sure that your profile is updated.</span>
                        </div>

                        <!-- SSLCommerz payment button -->
                        <button class="btn btn--base mt-4 btnpay" id="sslczPayBtn"
                            token="if you have any token validation"
                            postdata="your javascript arrays or objects which requires in backend"
                            order="If you already have the transaction generated for current order"
                            endpoint="{{route('payViaAjax')}}"> Pay Now to apply (Tk {{$job->application_fee}})
                        </button>
                        <!-- End SSLCommerz payment button -->

                        <!-- Bkash Payment Button -->
                        <a href="{{ route('url-create',$job->id) }}" class="btn btn-md px-4 btn--base mt-4">
                        @lang('apply')
                        </a>
                        <!-- End Bkash Payment Button -->


                        <!-- route('payViaAjax') For Manual Bank draft Payment -->
                            <!-- <button type="button" class="btn btn--base mt-4" data-bs-toggle="modal" data-bs-target="#applyJobModal">@lang('Apply Now')</button>  -->
                        <!-- End Manual Bank draft Payment -->


                        @endif
                    @else
                        <a href="{{route('user.login')}}" class="btn btn-md px-4 btn--danger mt-4">@lang('Login to apply')</a>
                    @endauth
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Modal for Manual bank payment -->
<div class="modal fade custom--modal" id="applyJobModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form method="POST" action="{{route('user.job.apply',request()->id)}}">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">@lang('Apply Job')</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-12 form-group">
                            <label>@lang('Bank Draft/Pay Order No.')</label>
                            <input type="text" name="bank_draft" placeholder="example: POA 123456" class="form--control" required>
                        </div>
                        <div class="col-lg-6 form-group">
                            <label>@lang('Amount')</label>
                            <input type="text" name="amount" placeholder="example: 600" class="form--control" required>
                        </div>
                        <div class="col-lg-6 form-group">
                            <label>@lang('Payment Date')</label>
                            <input type="text" name="payment_date" required autocomplete="off"  class="form--control">
                        </div>
                        <div class="col-lg-6 form-group">
                            <label>@lang('Bank Name')</label>
                            <input type="text" name="bank" placeholder="example: Sonali Bank PLC" class="form--control" required>
                        </div>
                        <div class="col-lg-6 form-group">
                            <label>@lang('Branch Name')</label>
                            <input type="text" name="branch" placeholder="example: Netrokona" class="form--control" required>
                        </div>
                        <span class="text-danger text-center">@lang('Please check your payment information carefully before apply for this job')</span>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn--dark btn-sm" data-bs-dismiss="modal">@lang('Close')</button>
                    <button type="submit" class="btn btn--base btn-sm">@lang('Apply')</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('style-lib')
    <link rel="stylesheet" href="{{asset('assets/global/css/datepicker.min.css')}}">
@endpush

@push('script-lib')
<script src="{{ asset('assets/global/js/datepicker.min.js') }}"></script>
<script src="{{ asset('assets/global/js/datepicker.en.js') }}"></script>
@endpush



@push('script')
    <script>
        "use strict";
        (function ($) {

        $('input[name=payment_date]').datepicker({
            language: 'en',
            dateFormat: 'dd-mm-yyyy',
            maxDate: new Date(),
        });
        })(jQuery);


        //sslcommerz popup integration
        var obj = {};
        obj.job_id = "";
        obj.job_title = "";
        obj.job_application_fee = "30";

        $('#sslczPayBtn').prop('postdata', obj);

        (function (window, document) {
            var loader = function () {
                var script = document.createElement("script"), tag = document.getElementsByTagName("script")[0];
                // script.src = "https://seamless-epay.sslcommerz.com/embed.min.js?" + Math.random().toString(36).substring(7); // USE THIS FOR LIVE
                script.src = "https://sandbox.sslcommerz.com/embed.min.js?" + Math.random().toString(36).substring(7); // USE THIS FOR SANDBOX
                tag.parentNode.insertBefore(script, tag);
            };

            window.addEventListener ? window.addEventListener("load", loader, false) : window.attachEvent("onload", loader);
        })(window, document);
    </script>
@endpush

@push('style')
    <style>
        .datepickers-container {
            z-index: 9999999;
        }
        label.currently_work.required::after {
            display: none !important;
        }
        .btnpay {
            background-color: #3498db !important;
        }

    </style>
@endpush