@extends('frontend.provider.app')

@section('title', 'Manage Staff')

@section('content')
<div class="page-wrapper">
    <!-- Start Breadscrumb -->
    <div class="breadcrumb-bar">
        <div class="container">
            <div class="breadcrumb-item">
                <nav aria-label="breadcrumb" class="page-breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-items"><a href="{{ route('home') }}">{{ __('home') }}</a></li>
                        <li class="breadcrumb-items"><span><i class="isax isax-arrow-right-3"></i></span></li>
                        <li class="breadcrumb-items active" aria-current="page">{{__('manage_staff')}}</li>
                    </ol>
                </nav>
                <h1 class="breadcrumb-title">{{__('manage_staff')}}</h1>
            </div>
        </div>
        <img src="/frontend/assets/img/elements/element-01.svg" alt="elements" class="img-fluid element-one position-absolute d-none d-lg-block">
        <img src="/frontend/assets/img/elements/element-02.svg" alt="elements" class="img-fluid element-two position-absolute d-none d-lg-block">
        <img src="/frontend/assets/img/elements/element-03.svg" alt="elements" class="img-fluid element-three position-absolute d-none d-lg-block">
        <img src="/frontend/assets/img/elements/element-04.svg" alt="elements" class="img-fluid element-four position-absolute d-none d-lg-block">
        <img src="/frontend/assets/img/elements/element-05.svg" alt="elements" class="img-fluid element-five position-absolute d-none d-lg-block">
    </div>
    <!-- End Breadscrumb -->

    <div class="content">
        <div class="container">
            <div class="row">
                @include('provider.partials.sidebar')
                <div class="col-xl-9 col-lg-8">

                    <input type="hidden" id="parent_id" value="{{ Auth::user()->id }}">
                    <div id="has_permission" data-delete="1" data-edit="1" data-visible="1"></div>

                    <!-- Page Header -->
                    <div class="d-flex align-items-center justify-content-between flex-wrap gap-3 border-bottom pb-4 mb-4">
                        <h4 class="mb-0">{{__('manage_staff')}}</h4>
                        <div class="d-flex align-items-center flex-wrap gap-2">
                            {{-- <a href="#" class="btn btn-md btn-secondary d-inline-flex align-items-center add_staff_btn"><i class="isax isax-add-circle me-1"></i>{{__('Add Staff')}}</a> --}}
                            <button type="button"
                                class="btn btn-secondary d-inline-flex align-items-center"
                                id="addStaffBtn"
                                data-href="{{ route('provider.add_staffs') }}"
                                data-loading-text="{{ __('Checking...') }}"
                                data-add_text="{{ __('Add Staff') }}">
                                <i class="isax isax-add-circle me-2"></i>{{ __('Add Staff') }}
                            </button>
                        </div>
                    </div>
                    <!-- End Page Header -->

                    <!-- row start -->
                    <div class="row row-gap-4" id="staffCardsRow">
                        <div class="col-12 text-center p-5" id="active-loader">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">{{ __('loading') }}</span>
                            </div>
                        </div>
                    </div>
                    <!-- row end -->

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

<!-- Start Delete Modal  -->
<div class="modal fade" id="del-staff">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content">
            <div class="modal-body text-center position-relative z-1 p-0">
                <form>
                    <div class="modal-body">
                        <div class="d-flex align-items-center justify-content-center">
                            <span class="delete-icon rounded-circle mb-3"><i class="isax isax-trash fs-16"></i></span>
                        </div>
                        <div class="text-center">
                            <h6 class="mb-1">{{__('are_you_sure')}}</h6>
                            <p class="mb-3">{{__('do you want to delete')}}</p>
                        </div>
                        <div class="d-flex align-items-center justify-content-center">
                            <button type="button" class="btn btn-light me-2" data-bs-dismiss="modal">{{__('Cancel')}}</button>
                            <button type="button" class="btn btn-danger" id="confirm_staff_delete">{{__('Delete')}}</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- End Delete Modal  -->

<div class="modal fade" id="no_sub" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-body text-center">
                <div class="mb-4">
                    <span class="warning-icon mx-auto mb-4">
                        <i class="ti ti-alert-circle"></i>
                    </span>
                    <h4 class="mb-1">{{ __('No Active Subscription Found') }}</h4>
                    <p class="text-muted">
                        {{ __('It looks like you do not have an active subscription. Please purchase a plan to create staffs and manage your business.') }}
                    </p>
                    <a href="{{ route('provider.subscription') }}" class="btn btn-linear-primary">{{ __('Get a Subscription') }}</a>
                    <a href="javascript:void(0);" data-bs-dismiss="modal" class="btn btn-outline-secondary">{{ __('Close') }}</a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="sub_count_end" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-body text-center">
                <div class="mb-4">
                    <span class="warning-icon mx-auto fs-2 mb-4">
                        <i class="ti ti-alert-circle"></i>
                    </span>
                    <h4 class="mb-1">{{ __('Your Staff Limit Has Been Reached') }}</h4>
                    <p class="text-muted">
                        {{ __('You have reached the maximum number of staffs allowed by your current subscription. Please upgrade to add more staffs.') }}
                    </p>
                    <a href="{{ route('provider.subscription') }}" class="btn btn-linear-primary">{{ __('Upgrade Subscription') }}</a>
                    <a href="javascript:void(0);" data-bs-dismiss="modal" class="btn btn-outline-secondary">{{ __('Close') }}</a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="sub_end" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-body text-center">
                <div class="mb-4">
                    <span class="warning-icon mx-auto fs-2 mb-4">
                        <i class="ti ti-alert-circle"></i>
                    </span>
                    <h4 class="mb-1">{{ __('Your Subscription Has Ended') }}</h4>
                    <p class="text-muted">
                        {{ __('Your subscription or top-up period has ended. Renew your plan to continue adding or managing staffs.') }}
                    </p>
                    <a href="{{ route('provider.subscription') }}" class="btn btn-linear-primary">{{ __('Renew Subscription') }}</a>
                    <a href="javascript:void(0);" data-bs-dismiss="modal" class="btn btn-outline-secondary">{{ __('Close') }}</a>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script src="{{ asset('front/js/staff.js') }}"></script>
@endpush