@extends('frontend.layout.dashboard-master')
@section('site_title', __('Proposal Details'))

@section('style')
<style>
/* ===== Flex / spacing utilities ===== */
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-btn     { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.d-none       { display: none !important; }
.d-flex       { display: flex; }
.d-block      { display: block; }
.flex-wrap    { flex-wrap: wrap; }
.flex-column  { flex-direction: column; }
.w-100        { width: 100%; }
.position-relative { position: relative; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.ms-2  { margin-left: 8px; }
.mb-1  { margin-bottom: 4px; }
.mb-2  { margin-bottom: 8px; }
.mb-4  { margin-bottom: 16px; }
.mt-0  { margin-top: 0; }
.mt-1  { margin-top: 4px; }
.mt-2  { margin-top: 8px; }
.p-3   { padding: 12px; }
.bg-light { background: #F9FBFC; }
.rounded  { border-radius: 6px; }
.disabled-link { background-color: #ccc !important; pointer-events: none; cursor: default; }

/* ===== Proposal card components ===== */
.myJob-wrapper-single-id   { font-size: 13px; color: #637381; font-weight: 500; }
.myJob-wrapper-single-title { font-size: 16px; font-weight: 600; color: #242B36; margin: 0; }
.myJob-wrapper-single-title a { color: #242B36; text-decoration: none; }
.myJob-wrapper-single-contents-para { font-size: 14px; line-height: 1.7; color: #3B4759; white-space: pre-line; }
.myJob-wrapper-single-header { padding-bottom: 16px; margin-bottom: 16px; }

/* ===== Borders ===== */
.profile-border-top    { border-top: 1px solid #E9EBF0; padding-top: 16px; margin-top: 16px; }
.profile-border-bottom { border-bottom: 1px solid #E9EBF0; padding-bottom: 16px; margin-bottom: 16px; }

/* ===== Buttons ===== */
.btn-profile        { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none; border: 1px solid transparent; }
.btn-bg-1           { background: var(--main-color-one); color: #fff; border-color: var(--main-color-one); }
.btn-bg-1:hover     { background: #005f44; border-color: #005f44; color: #fff; }
.btn-outline-gray   { background: transparent; border-color: #D0D5DD; color: #637381; }
.btn-outline-gray:hover { background: #F1F5F9; }
.btn-hover-danger:hover { border-color: #EF4444; color: #EF4444; background: #FEF2F2; }
.btn-wrapper { display: flex; }

/* ===== Author ===== */
.jobFilter-proposal-author-flex { display: flex; align-items: flex-start; gap: 12px; }
.jobFilter-proposal-author-thumb img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid #E9EBF0; }
.jobFilter-proposal-author-contents { flex: 1; min-width: 0; }
.jobFilter-proposal-author-contents-title { font-size: 15px; font-weight: 600; color: #242B36; margin: 0; }
.jobFilter-proposal-author-contents-title a { color: #242B36; text-decoration: none; }
.jobFilter-proposal-author-contents-title a:hover { color: var(--main-color-one); }
.jobFilter-proposal-author-contents-subtitle { font-size: 13px; color: #637381; }
.jobFilter-proposal-author-contents-time { font-size: 12px; color: #637381; margin: 0; }
.job-proposal-btn { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ===== Offered stats ===== */
.jobFilter-proposal-offered { display: flex; flex-wrap: wrap; gap: 16px; padding: 12px 0; border-top: 1px solid #E9EBF0; margin-top: 12px; }
.offered { font-size: 13px; color: #637381; }
.offered-price, .offered-days { font-weight: 600; color: #242B36; }

/* ===== Shortlisted badges ===== */
.shortlisted-item { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 9999px; font-size: 12px; font-weight: 500; background: #F1F5F9; color: #3B4759; }
.shortlisted-item.seen     { background: #EFF9F3; color: var(--main-color-one); }
.shortlisted-item.not_seen { background: #F1F5F9; color: #637381; }
.shortlisted-item.hired    { background: #FFF4E8; color: #FA8C00; }

/* ===== Attachment link ===== */
.single-refundRequest-item-uploads { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: #F1F5F9; border: 1px solid #E9EBF0; border-radius: 8px; font-size: 13px; font-weight: 500; color: #3B4759; text-decoration: none; }
.single-refundRequest-item-uploads:hover { background: #EFF9F3; color: var(--main-color-one); border-color: var(--main-color-one); }

/* ===== Form inputs (modals) ===== */
.single-input  { display: flex; flex-direction: column; gap: 4px; }
.label-title   { font-size: 14px; font-weight: 500; color: #344054; margin-bottom: 4px; display: block; }
.form-control, .form-message {
    width: 100%; padding: 10px 14px; border: 1px solid #D0D5DD;
    border-radius: 8px; font-size: 14px; color: #344054;
    background: #fff; outline: none; box-sizing: border-box;
}
.form-control:focus, .form-message:focus { border-color: var(--main-color-one); box-shadow: 0 0 0 3px rgba(var(--main-color-one-rgb), 0.1); }

/* ===== Payment gateway notice / forms ===== */
.alert-warning { background: #FFF4E8; border: 1px solid #FDDDB4; border-radius: 8px; padding: 8px 12px; font-size: 12.5px; color: #92400E; margin-bottom: 8px; }
.confirm-payment { border: 1px solid #E9EBF0; border-radius: 8px; padding: 10px; }
.payment-border { border: 1px solid #E9EBF0; border-radius: 8px; padding: 16px; }
.single-checkbox { }
.checkbox-inlines { }
.checkbox-label { display: block; cursor: pointer; }
.wallet-balance, .display_balance, .deposit_link { display: block; font-size: 13px; color: #637381; }
.show_hide_transaction_section { font-size: 13px; }
.payment-gateway-wrapper { }

/* ===== Submit spinner ===== */
.spinner-border { display: inline-block; width: 1rem; height: 1rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: tw-spin 0.75s linear infinite; }
.spinner-border-sm { width: 0.875rem; height: 0.875rem; }
@keyframes tw-spin { to { transform: rotate(360deg); } }

/* ===== cover letter ===== */
.cover_letter_details { white-space: pre-line; }
</style>
@endsection

@section('content')

{{-- Page Header --}}
<div class="mb-6 flex items-center justify-between">
    <div>
        <h1 class="text-[20px] font-semibold leading-7 text-[#242B36]">{{ __('Proposal Details') }}</h1>
        <p class="mt-1 text-[14px] text-[#637381]">{{ $proposal_details->job->title ?? '' }}</p>
    </div>
    <a href="{{ route('client.job.details', $proposal_details->job_id) }}"
       class="inline-flex items-center gap-2 rounded-xl border border-[#D0D5DD] bg-white px-4 py-2 text-[14px] font-medium text-[#637381] hover:bg-[#F9FBFC]">
        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
        </svg>
        {{ __('Back to Job') }}
    </a>
</div>

<div class="space-y-6">

    {{-- Freelancer Card --}}
    <div class="rounded-xl border border-[#E9EBF0] bg-white p-6">

        <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
            {{-- Author --}}
            <div class="jobFilter-proposal-author-flex">
                <div class="jobFilter-proposal-author-thumb">
                    @if($proposal_details->freelancer?->image)
                        @if(cloudStorageExist() && in_array(Storage::getDefaultDriver(), ['s3', 'cloudFlareR2', 'wasabi']))
                            <img src="{{ render_frontend_cloud_image_if_module_exists('profile/'.$proposal_details?->freelancer?->image, load_from: $proposal_details?->freelancer?->load_from) }}" alt="{{ $proposal_details?->freelancer?->fullname }}">
                        @else
                            <a href="{{ route('freelancer.profile.details', $proposal_details?->freelancer->username) }}">
                                <img src="{{ asset('assets/uploads/profile/'.$proposal_details?->freelancer?->image) }}" alt="{{ $proposal_details?->freelancer?->fullname }}">
                            </a>
                        @endif
                    @else
                        <a href="{{ route('freelancer.profile.details', $proposal_details?->freelancer->username) }}">
                            <img src="{{ asset('assets/static/img/author/author.jpg') }}" alt="{{ __('AuthorImg') }}">
                        </a>
                    @endif
                </div>
                <div class="jobFilter-proposal-author-contents">
                    <h4 class="jobFilter-proposal-author-contents-title">
                        <a href="{{ route('freelancer.profile.details', $proposal_details?->freelancer->username) }}">{{ $proposal_details->freelancer?->fullname ?? '' }}</a>
                        <x-status.user-active-inactive-check :userID="$proposal_details->freelancer->id" />
                    </h4>
                    <p class="jobFilter-proposal-author-contents-subtitle mt-1">
                        {{ $proposal_details->freelancer?->user_introduction?->title ?? '' }}
                        @if($proposal_details->freelancer?->user_state?->state || $proposal_details->freelancer?->user_country?->country)
                            · {{ $proposal_details->freelancer?->user_state?->state ?? '' }}, {{ $proposal_details->freelancer?->user_country?->country ?? '' }}
                        @endif
                    </p>
                    <div class="mt-1">
                        {!! freelancer_rating($proposal_details->freelancer_id) !!}
                    </div>
                </div>
            </div>
            {{-- Status badges --}}
            <div class="job-proposal-btn flex-shrink-0">
                <x-job.job-proposal-view :isView="$proposal_details->is_view" />
                <x-job.hire-short-list-check :isHired="$proposal_details->is_hired" :isShortListed="$proposal_details->is_short_listed" />
                <p class="jobFilter-proposal-author-contents-time">{{ $proposal_details->created_at->diffForHumans() }}</p>
            </div>
        </div>

        {{-- Offered stats --}}
        <div class="jobFilter-proposal-offered">
            <div><span class="offered">{{ __('Offered') }} <span class="offered-price">{{ float_amount_with_currency_symbol($proposal_details->amount) }}</span></span></div>
            <div><span class="offered">{{ __('Est. delivery duration') }} <span class="offered-days">{{ $proposal_details->duration }}</span></span></div>
            @if($proposal_details?->job?->type == 'hourly')
                <div><span class="offered">{{ __(ucfirst($proposal_details?->job->type)) }} <span class="offered-price">{{ float_amount_with_currency_symbol($proposal_details?->job->hourly_rate) }}</span></span></div>
                <div><span class="offered">{{ __('Estimated hours') }} <span class="offered-price">{{ $proposal_details?->job->estimated_hours ?? '' }}</span></span></div>
            @endif
        </div>

        {{-- Action buttons --}}
        <div class="profile-border-top">
            <div class="flex flex-wrap gap-3 add_remove_interview_location_{{ $proposal_details->id }}">

                @if($proposal_details->is_rejected == 0 && $proposal_details->is_hired == 0)
                    <a href="javascript:void(0)" class="btn-profile btn-outline-gray loadingRound add_remove_shortlist" data-proposal-id="{{ $proposal_details->id }}">
                        @if($proposal_details->is_short_listed == 0)
                            <span class="add_to_short_listed">{{ __('Add to Shortlist') }}</span>
                        @else
                            <span class="remove_from_short_listed">{{ __('Remove from Shortlist') }}</span>
                        @endif
                    </a>
                @endif

                @if($proposal_details?->job?->type == 'hourly')
                    <a href="javascript:void(0)" data-open-modal="rate-hours-modal" class="btn-profile btn-bg-1">{{ __('Update Hourly Rate') }}</a>
                @endif

                <div class="rejected_interview_location_{{ $proposal_details->id }}">
                    @if($proposal_details->is_rejected == 1)
                        <span class="btn-profile btn-outline-gray">{{ __('Rejected') }}</span>
                    @else
                        <div class="flex flex-wrap gap-3">
                            <a href="javascript:void(0)"
                               class="btn-profile btn-bg-1 take_freelancer_interview"
                               data-job-id="{{ $proposal_details->job?->id }}"
                               data-proposal-id="{{ $proposal_details->id }}"
                               data-freelancer-id="{{ $proposal_details->freelancer_id }}">
                                @if($proposal_details->is_interview_take == 1) {{ __('Interviewed') }} @else {{ __('Take Interview') }} @endif
                            </a>
                            @if($proposal_details->is_hired == 0 && $proposal_details?->job?->type != 'hourly')
                                <a href="javascript:void(0)" class="btn-profile btn-outline-gray reject_proposal" data-proposal-id="{{ $proposal_details->id }}">{{ __('Reject') }}</a>
                                <a href="javascript:void(0)"
                                   class="btn-profile btn-outline-gray accept_proposal"
                                   data-job-id-for-order="{{ $proposal_details->job_id }}"
                                   data-proposal-id-for-order="{{ $proposal_details->id }}"
                                   data-open-modal="payment-gateway-modal">{{ __('Accept') }}</a>
                            @endif
                            @if(moduleExists('HourlyJob'))
                                @if($proposal_details->is_hired == 0 && $proposal_details?->job->type == 'hourly')
                                    <a href="javascript:void(0)" class="btn-profile btn-outline-gray reject_proposal" data-proposal-id="{{ $proposal_details->id }}">{{ __('Reject') }}</a>
                                    <a href="javascript:void(0)" class="btn-profile btn-outline-gray accept_hourly_proposal swal_status_change_button">{{ __('Accept') }}</a>
                                    <form method="post" action="{{ route('order.user.confirm') }}" class="d-none">
                                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                        <input type="hidden" name="job_id_for_order" value="{{ $proposal_details->job_id }}">
                                        <input type="hidden" name="proposal_id_for_order" value="{{ $proposal_details->id }}">
                                        <input type="hidden" name="offer_id_for_order" id="offer_id_for_order">
                                        <input type="hidden" name="job_type_for_order" id="job_type_for_order">
                                        <button type="submit" class="swal_form_submit_btn d-none"></button>
                                    </form>
                                @endif
                            @endif
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    {{-- Cover Letter --}}
    <div class="rounded-xl border border-[#E9EBF0] bg-white p-6">
        <h2 class="mb-4 text-[16px] font-semibold text-[#242B36]">{{ __('Cover Letter') }}</h2>
        <p class="cover_letter_details text-[14px] leading-relaxed text-[#3B4759]">{{ $proposal_details->cover_letter ?? '' }}</p>
    </div>

    {{-- Attachment --}}
    @if($proposal_details->attachment)
    <div class="rounded-xl border border-[#E9EBF0] bg-white p-6">
        <h2 class="mb-4 text-[16px] font-semibold text-[#242B36]">{{ __('Attachment') }}</h2>
        @if(cloudStorageExist() && in_array(Storage::getDefaultDriver(), ['s3', 'cloudFlareR2', 'wasabi']))
            <a href="{{ render_frontend_cloud_image_if_module_exists('jobs/proposal/'.$proposal_details->attachment, load_from: $proposal_details->load_from) }}" download class="single-refundRequest-item-uploads">
                <i class="fa-solid fa-cloud-arrow-down"></i> {{ __('Download Attachment') }}
            </a>
        @else
            <a href="{{ asset('assets/uploads/jobs/proposal/'.$proposal_details->attachment) }}" download class="single-refundRequest-item-uploads">
                <i class="fa-solid fa-cloud-arrow-down"></i> {{ __('Download Attachment') }}
            </a>
        @endif
    </div>
    @endif

</div>

{{-- Interview Modal --}}
<div id="interview-modal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/50">
    <div class="relative mx-auto w-full max-w-lg rounded-xl bg-white shadow-xl">
        <div class="flex items-center justify-between border-b border-[#E9EBF0] px-6 py-4">
            <h3 class="text-[16px] font-semibold text-[#242B36]">{{ __('Take Interview') }}</h3>
            <button onclick="closeModal('interview-modal')" class="text-[#637381] hover:text-[#242B36]">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="px-6 py-4">
            <div class="mb-4 rounded-lg border border-[#E9EBF0] bg-[#F9FBFC] p-4">
                <span class="myJob-wrapper-single-id">#{{ str_pad($proposal_details->job?->id, 6, '0', STR_PAD_LEFT) }}</span>
                <h4 class="myJob-wrapper-single-title mt-2">{{ $proposal_details->job?->title }}</h4>
                <p class="mt-1 text-[13px] text-[#637381]">{{ $proposal_details->job?->created_at->diffForHumans() }} · {{ ucfirst($proposal_details->job?->level) }}</p>
            </div>
            <form action="{{ route('client.message.send') }}" method="post" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="freelancer_id" id="freelancer_id">
                <input type="hidden" name="from_user" id="from_user" value="{{ $proposal_details?->job?->user_id }}">
                <input type="hidden" name="job_id" id="job_id" value="{{ $proposal_details?->job?->id }}">
                <input type="hidden" name="type" id="type" value="job">
                <input type="hidden" name="proposal_id" id="proposal_id_for_check_interview">
                <div class="single-input mb-4">
                    <label for="interview_message" class="label-title">{{ __('Write a Message') }}</label>
                    <textarea name="interview_message" id="interview_message" rows="3" class="form-message" placeholder="{{ __('E.g. I would like to invite you...') }}"></textarea>
                </div>
                <div class="flex items-center justify-end gap-3">
                    <button type="button" onclick="closeModal('interview-modal')" class="btn-profile btn-outline-gray btn-hover-danger">{{ __('Cancel') }}</button>
                    <button type="submit" class="btn-profile btn-bg-1"><i class="fa-regular fa-comments"></i> {{ __('Send Message') }}</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Rate & Hours Modal --}}
<div id="rate-hours-modal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/50">
    <div class="relative mx-auto w-full max-w-md rounded-xl bg-white shadow-xl">
        <div class="flex items-center justify-between border-b border-[#E9EBF0] px-6 py-4">
            <h3 class="text-[16px] font-semibold text-[#242B36]">{{ __('Hourly Rate & Estimated Hours') }}</h3>
            <button onclick="closeModal('rate-hours-modal')" class="text-[#637381] hover:text-[#242B36]">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <form action="{{ route('client.job.hourly.rate') }}" method="post">
            @csrf
            <div class="space-y-4 px-6 py-4">
                <input type="hidden" name="proposal_id" value="{{ $proposal_details?->id }}">
                <div class="single-input">
                    <label class="label-title">{{ __('Hourly Rate') }}</label>
                    <input name="hourly_rate" class="form-control" value="{{ $proposal_details?->hourly_rate ?? $proposal_details?->job?->hourly_rate }}">
                </div>
                <div class="single-input">
                    <label class="label-title">{{ __('Estimated Hours') }}</label>
                    <input name="estimated_hour" class="form-control" value="{{ $proposal_details?->estimated_hours ?? $proposal_details?->job?->estimated_hours }}">
                </div>
            </div>
            <div class="flex justify-end gap-3 border-t border-[#E9EBF0] px-6 py-4">
                <button type="button" onclick="closeModal('rate-hours-modal')" class="btn-profile btn-outline-gray">{{ __('Cancel') }}</button>
                <button type="submit" class="btn-profile btn-bg-1">{{ __('Update') }}</button>
            </div>
        </form>
    </div>
</div>

{{-- Payment Gateway Modal --}}
<div id="payment-gateway-modal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/50 p-4">
    <div class="relative mx-auto w-full max-w-md rounded-xl bg-white shadow-xl flex flex-col" style="max-height:85vh">
        <div class="flex shrink-0 items-center justify-between border-b border-[#E9EBF0] px-5 py-3">
            <h3 class="text-[15px] font-semibold text-[#242B36]">{{ __('Accept Proposal') }}</h3>
            <button onclick="closeModal('payment-gateway-modal')" class="text-[#637381] hover:text-[#242B36]">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <form action="{{ route('order.user.confirm') }}" method="post" enctype="multipart/form-data" class="flex flex-col flex-1 min-h-0">
            <input type="hidden" name="job_id_for_order" id="job_id_for_order">
            <input type="hidden" name="proposal_id_for_order" id="proposal_id_for_order">
            <input type="hidden" name="offer_id_for_order" id="offer_id_for_order">
            <input type="hidden" name="job_type_for_order" id="job_type_for_order">
            @csrf
            <div class="flex-1 overflow-y-auto px-5 py-3 space-y-3">
                <div class="rounded-lg border border-[#E9EBF0] bg-[#F9FBFC] px-3 py-2">
                    <p class="text-[12.5px] text-[#637381]"><strong>{{ __('Job') }}:</strong> <span id="modal_job_title">{{ $proposal_details->job->title ?? '' }}</span></p>
                </div>
                <x-notice.general-notice :description="__('Before create an order we encourage to contact the seller so that seller can not decline your order.')" />
                <div class="confirm-payment">
                    <div class="load_after_login">
                        @if (Auth::check() && Auth::user()->user_wallet?->balance > 0)
                            {!! \App\Helper\PaymentGatewayList::renderWalletForm() !!}
                            <span class="wallet-balance d-block" style="font-size:12px;color:#637381;margin-bottom:6px">{{ __('Wallet Balance:') }} <strong class="main-balance">{{ float_amount_with_currency_symbol(Auth::user()->user_wallet?->balance) }}</strong></span>
                            <span class="display_balance"></span>
                            <span class="deposit_link"></span>
                        @endif
                        <p class="d-none show_hide_transaction_section">
                            <strong>{{ __('Transaction Fee') }}</strong>
                            <span class="currency_symbol"></span>
                            <span class="transaction_fee_amount"></span>
                        </p>
                        {!! \App\Helper\PaymentGatewayList::renderPaymentGatewayForForm(false) !!}
                    </div>
                </div>
            </div>
            <div class="shrink-0 border-t border-[#E9EBF0] px-5 pt-3 pb-1">
                <p style="font-size:11.5px;color:#9CA3AF;text-align:center;margin:0 0 10px">
                    {{ __('By continuing you accept our') }}
                    @php $tocSlug = get_static_option('toc_page_link'); @endphp
                    <a href="{{ $tocSlug ? route('frontend.dynamic.page', ['slug' => $tocSlug]) : '#' }}" target="_blank" style="color:#637381;text-decoration:underline">{{ __('Terms & Conditions') }}</a>
                    {{ __('and') }}
                    @php $privacySlug = get_static_option('privacy_policy_link'); @endphp
                    <a href="{{ $privacySlug ? route('frontend.dynamic.page', ['slug' => $privacySlug]) : '#' }}" target="_blank" style="color:#637381;text-decoration:underline">{{ __('Privacy Policy') }}</a>.
                </p>
                <div class="flex items-center justify-end gap-3">
                    <button type="button" onclick="closeModal('payment-gateway-modal')" class="btn-profile btn-outline-gray btn-hover-danger">{{ __('Close') }}</button>
                    <x-btn.submit :title="__('Order Now')" :class="'btn-profile btn-bg-1'" />
                </div>
            </div>
        </form>
    </div>
</div>

@endsection

@section('script')
    <x-frontend.payment-gateway.gateway-select-js />
    <x-sweet-alert.sweet-alert2-js />
    @include('frontend.user.client.job.job-details.proposal-js')
    <script>
    function openModal(id) {
        const el = document.getElementById(id);
        if (el) { el.classList.remove('hidden'); el.classList.add('flex'); }
    }
    function closeModal(id) {
        const el = document.getElementById(id);
        if (el) { el.classList.add('hidden'); el.classList.remove('flex'); }
    }
    document.addEventListener('click', function(e) {
        if (e.target.classList.contains('fixed') && e.target.id) closeModal(e.target.id);
    });

    $(document).on('click', '.take_freelancer_interview', function() {
        $('#freelancer_id').val($(this).data('freelancer-id'));
        $('#proposal_id_for_check_interview').val($(this).data('proposal-id'));
        openModal('interview-modal');
    });

    $(document).on('click', '.accept_proposal', function() {
        $('#job_id_for_order').val($(this).data('job-id-for-order'));
        $('#proposal_id_for_order').val($(this).data('proposal-id-for-order'));
        $('#job_type_for_order').val('job');
    });

    $(document).on('click', '[data-open-modal]', function() {
        openModal($(this).data('open-modal'));
    });

    function toastr_success_js(msg) {
        toastr.success(msg, "Success!");
        toastr.options = { closeButton: true, progressBar: true, positionClass: "toast-top-right", timeOut: "5000" };
    }
    function toastr_warning_js(msg) {
        toastr.warning(msg, "Warning!");
        toastr.options = { closeButton: true, progressBar: true, positionClass: "toast-top-right", timeOut: "5000" };
    }
    </script>
@endsection