@extends('backend.layouts.app')

@section('title',__('label.view_certificate_title').' | '.env('APP_NAME'))

@push('after-styles')
@endpush

@section('breadcrumb')
    <div class="subheader py-2 py-lg-4 subheader-solid" id="kt_subheader">
        <div class="container-fluid d-flex align-items-center justify-content-between flex-wrap flex-sm-nowrap">
            <!--begin::Info-->
            <div class="d-flex align-items-center flex-wrap mr-1">
                <!--begin::Page Heading-->
                <div class="d-flex align-items-baseline mr-5">
                    <!--begin::Page Title-->
                    <!--end::Page Title-->
                    <!--begin::Breadcrumb-->
                    <ul class="breadcrumb breadcrumb-transparent breadcrumb-dot font-weight-bold p-0 my-2 font-size-sm">
                        <li class="breadcrumb-item active">
                            <a href="{{ route('admin.dashboard') }}" class="text-muted">{{ __('breadcrumb.dashboard') }}</a>
                        </li>
                        <li class="breadcrumb-item active">
                            <a href="{{ route('admin.certificates.index') }}" class="text-muted">{{ __('breadcrumb.certificate') }}</a>
                        </li>
                        <li class="breadcrumb-item">
                            {{ __('breadcrumb.view_certificate_request') }}
                        </li>
                    </ul>
                    <!--end::Breadcrumb-->
                </div>
                <!--end::Page Heading-->
            </div>
            <!--end::Info-->
        </div>
    </div>
@endsection

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <form class="form" method="post" id="certificate_update" action="{{ route('admin.certificates.status.update',$details?->id) }}">
                    @csrf
                    <div class="card card-custom card-stretch">
                    <!--begin::Header-->
                    <div class="card-header py-3">
                        <div class="card-title">
                            <h3 class="card-label font-weight-bolder text-dark">{{ __('label.view_certificate_title') }}</h3>
                        </div>
                    </div>
                    <!--end::Header-->

                    <!--begin::Form-->

                        <!--begin::Body-->
                        <div class="card-body">
                            <div class="form-group row">
                                <label class="col-xl-3 col-lg-3 col-form-label">Current Status :</label>
                                <label class="col-lg-9 col-xl-6 col-form-label">

                                    @if ($details?->status === 0)
                                        <span class="label label-lg label-light-warning label-inline"> {{ __('label.pending') }}</span>
                                    @elseif ($details->status === 1)
                                        <span
                                            class="label label-lg label-light-success label-inline"> {{ __('label.approved') }}</span>
                                    @else
                                        <span class="label label-lg label-light-danger label-inline">{{ __('label.rejected') }}</span>
                                    @endif
                                </label>
                            </div>
                            <div class="form-group row">
                                <label class="col-xl-3 col-lg-3 col-form-label">Hospital Name :</label>
                                <label class="col-lg-9 col-xl-6 col-form-label">{{ $details?->hospital?->name }}</label>
                            </div>
                            <div class="form-group row">
                                <label class="col-xl-3 col-lg-3 col-form-label">Full Name :</label>
                                <label class="col-lg-9 col-xl-6 col-form-label">{{ $details?->full_name }}</label>
                            </div>
                            <div class="form-group row">
                                <label class="col-xl-3 col-lg-3 col-form-label">Address :</label>
                                <label class="col-lg-9 col-xl-6 col-form-label">{{ $details?->address }}</label>
                            </div>
                            <div class="form-group row">
                                <label class="col-xl-3 col-lg-3 col-form-label">Email :</label>
                                <label class="col-lg-9 col-xl-6 col-form-label">{{ $details?->email }}</label>
                            </div>
                            <div class="form-group row">
                                <label class="col-xl-3 col-lg-3 col-form-label">Mobile :</label>
                                <label class="col-lg-9 col-xl-6 col-form-label">{{ $details?->user?->mobile }}</label>
                            </div>
                            <div class="form-group row">
                                <label class="col-xl-3 col-lg-3 col-form-label">Medical Problem :</label>
                                <label class="col-lg-9 col-xl-6 col-form-label">{{ $details?->medical_problem }}</label>
                            </div>
                            <div class="form-group row">
                                <label class="col-xl-3 col-lg-3 col-form-label">Aadhar Card Number : </label>
                                <label class="col-lg-9 col-xl-6 col-form-label">{{ $details?->aadhar_card_number }}</label>
                            </div>
                            <div class="form-group row">
                                <label class="col-xl-3 col-lg-3 col-form-label">Aadhar Card Photos :</label>
                                <div class="col-lg-9 col-xl-6">
                                    <div class="row">
                                    <div class="col-lg-4 col-xl-4">
                                        <!--begin::Overlay-->
                                        <a class="d-block overlay" data-fslightbox="lightbox-basic" href="{{ $details?->aadhar_card_front_photo }}">
                                            <!--begin::Image-->
                                            <div class="overlay-wrapper bgi-no-repeat bgi-position-center bgi-size-cover card-rounded min-h-175px"
                                                 style="background-image:url({{ $details?->aadhar_card_front_photo }})">
                                            </div>
                                            <!--end::Image-->

                                            <!--begin::Action-->
                                            <div class="overlay-layer card-rounded bg-dark bg-opacity-25 shadow">
                                                <i class="bi bi-eye-fill text-white fs-3x"></i>
                                            </div>
                                            <!--end::Action-->
                                        </a>
                                        <!--end::Overlay-->
                                    </div>
                                    <div class="col-lg-4 col-xl-4">
                                        <!--begin::Overlay-->
                                        <a class="d-block overlay" data-fslightbox="lightbox-basic" href="{{ $details?->aadhar_card_back_photo }}">
                                            <!--begin::Image-->
                                            <div class="overlay-wrapper bgi-no-repeat bgi-position-center bgi-size-cover card-rounded min-h-175px"
                                                 style="background-image:url({{ $details?->aadhar_card_back_photo }})">
                                            </div>
                                            <!--end::Image-->

                                            <!--begin::Action-->
                                            <div class="overlay-layer card-rounded bg-dark bg-opacity-25 shadow">
                                                <i class="bi bi-eye-fill text-white fs-3x"></i>
                                            </div>
                                            <!--end::Action-->
                                        </a>
                                        <!--end::Overlay-->
                                    </div>
                                </div>
                                </div>
                            </div>
                            @if($details?->status === 0)
                            <div class="form-group row">
                                <div class="col-md-4">
                                    <div class="radio-inline">
                                        <label class="radio radio-success">
                                            <input type="radio" name="status" class="rejection" value="1"/>
                                            <span></span>
                                            Approved
                                        </label>
                                        <label class="radio radio-danger">
                                            <input type="radio" name="status" class="rejection" value="2"/>
                                            <span></span>
                                            Rejected
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row" id="rejection_reason" style="display: none">
                                <div class="col-md-4">
                                    <label>Rejection Reason :</label>
                                    <textarea name="rejection_reason" class="form-control reason"></textarea>
                                </div>
                            </div>
                                @endif
                        </div>
                        <!--end::Body-->

                    <!--end::Form-->
                        @if($details?->status === 0)
                            <div class="card-footer">
                                <button class="btn btn-success">Update</button>
                                <a href="{{ route('admin.certificates.index') }}" class="btn btn-secondary">Cancel</a>
                            </div>
                        @endif
                </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('after-scripts')
    @component('backend.layouts.components.validation')@endcomponent
    <script src="{{ asset('plugins/custom/fslightbox/fslightbox.bundle.js') }}"></script>
    <script>
        $(document).ready(function () {
            $("#certificate_update").validate({
                errorClass: 'is-invalid',
                normalizer: function(value) {
                    return $.trim(value);
                },
                rules: {
                    rejection_reason: {
                        required: true,
                    }
                },
                onfocusout: function(element) {
                    // "eager" validation
                    // this.element(element);
                }
            });
        });
        $(document).on('change','.rejection',function(){
            $('#rejection_reason').hide();
            $('.reason').attr('required',false);
            if(parseInt($(this).val()) === 2){
                $('.reason').attr('required',true);
                $('#rejection_reason').show();
            }
        });
    </script>
@endsection