@extends('dashboard.doctor.layouts.master')

@section('title', trans('doctor.profile.title'))

@section('toolbar')
    <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
        <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
            <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">{{ trans('doctor.profile.title') }}</h1>
        </div>
    </div>
@endsection

@section('content')
    <div id="kt_app_content_container" class="app-container container-xxl">

        @if(session('success'))
            <div class="alert alert-success mb-5">{{ session('success') }}</div>
        @endif

        <form method="POST" action="{{ route('doctor.profile.update') }}" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            <div class="row g-5">
                <div class="col-xl-4">
                    <div class="card card-flush py-4 mb-5">
                        <div class="card-header">
                            <div class="card-title">
                                <h2>{{ trans('doctor.profile.photo') }}</h2>
                            </div>
                        </div>
                        <div class="card-body text-center pt-0">
                            <style>
                                .image-input-placeholder {
                                    background-image: url('{{ asset('assets/media/svg/files/blank-image.svg') }}');
                                }
                                [data-bs-theme="dark"] .image-input-placeholder {
                                    background-image: url('{{ asset('assets/media/svg/files/blank-image-dark.svg') }}');
                                }
                            </style>

                            <div class="image-input image-input-outline {{ $doctor->photo_path ? '' : 'image-input-empty image-input-placeholder' }} mb-3"
                                 data-kt-image-input="true">
                                <div class="image-input-wrapper w-150px h-150px"
                                     style="background-image:url({{ $doctor->photo_path ? asset($doctor->photo_path) : asset('assets/media/avatars/blank.png') }})"></div>
                                <label class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                                       data-kt-image-input-action="change" data-bs-toggle="tooltip" title="{{ trans('doctor.profile.change_photo') }}">
                                    <i class="ki-duotone ki-pencil fs-6"><span class="path1"></span><span class="path2"></span></i>
                                    <input type="file" name="photo" accept=".png,.jpg,.jpeg,.webp"/>
                                </label>
                                <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                                      data-kt-image-input-action="cancel" data-bs-toggle="tooltip" title="{{ trans('doctor.profile.cancel_photo') }}">
                                    <i class="ki-duotone ki-cross fs-2"><span class="path1"></span><span class="path2"></span></i>
                                </span>
                            </div>
                            @error('photo')<div class="text-danger fs-7">{{ $message }}</div>@enderror
                            <div class="text-muted fs-8">{{ trans('doctor.profile.photo_hint') }}</div>
                        </div>
                    </div>

                    <div class="card card-flush py-4">
                        <div class="card-header">
                            <div class="card-title"><h2>{{ trans('doctor.profile.account_info') }}</h2></div>
                        </div>
                        <div class="card-body pt-0">
                            <div class="mb-4">
                                <div class="text-muted fs-7">{{ trans('doctor.auth.email') }}</div>
                                <div class="fs-6 fw-semibold">{{ $doctor->email }}</div>
                            </div>
                            <div class="mb-4">
                                <div class="text-muted fs-7">{{ trans('doctor.profile.specialty') }}</div>
                                <div class="fs-6 fw-semibold">{{ $doctor->specialty?->name ?? trans('doctor.common.not_available') }}</div>
                            </div>
                            <div class="mb-4">
                                <div class="text-muted fs-7">{{ trans('doctor.profile.status') }}</div>
                                <div>
                                    @if($doctor->status === 'active')
                                        <span class="badge badge-light-success">{{ trans('core.common.status_active') }}</span>
                                    @else
                                        <span class="badge badge-light-danger">{{ trans('core.common.status_inactive') }}</span>
                                    @endif
                                </div>
                            </div>
                            <div class="mb-2">
                                <div class="text-muted fs-7">{{ trans('doctor.profile.clinics') }}</div>
                                <div class="fs-6">
                                    @forelse($doctor->clinics as $clinic)
                                        <div>{{ $clinic->branch?->name }} — {{ $clinic->name }}</div>
                                    @empty
                                        {{ trans('doctor.common.not_available') }}
                                    @endforelse
                                </div>
                            </div>
                            <div class="text-muted fs-8 mt-3">{{ trans('doctor.profile.contact_admin_hint') }}</div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-8">
                    <div class="card card-flush py-4">
                        <div class="card-header">
                            <div class="card-title"><h2>{{ trans('doctor.profile.personal_info') }}</h2></div>
                        </div>
                        <div class="card-body pt-0">
                            <div class="fv-row mb-5">
                                <label class="form-label fw-semibold">{{ trans('doctor.patients.name') }}</label>
                                <input type="text" name="name" value="{{ old('name', $doctor->name) }}" class="form-control @error('name') is-invalid @enderror"/>
                                @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="fv-row mb-5">
                                <label class="form-label fw-semibold">{{ trans('doctor.patients.phone') }}</label>
                                <input type="text" name="phone" value="{{ old('phone', $doctor->phone) }}" class="form-control @error('phone') is-invalid @enderror"/>
                                @error('phone')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="fv-row mb-5">
                                <label class="form-label fw-semibold">{{ trans('doctor.profile.years_experience') }}</label>
                                <input type="number" min="0" max="80" name="years_experience" value="{{ old('years_experience', $doctor->years_experience) }}" class="form-control @error('years_experience') is-invalid @enderror"/>
                                @error('years_experience')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="fv-row mb-5">
                                <label class="form-label fw-semibold">{{ trans('doctor.profile.bio') }}</label>
                                <textarea name="bio" rows="3" class="form-control @error('bio') is-invalid @enderror">{{ old('bio', $doctor->bio) }}</textarea>
                                @error('bio')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="fv-row mb-5">
                                <label class="form-label fw-semibold">{{ trans('doctor.profile.qualifications') }}</label>
                                <textarea name="qualifications" rows="3" class="form-control @error('qualifications') is-invalid @enderror">{{ old('qualifications', $doctor->qualifications) }}</textarea>
                                @error('qualifications')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <button type="submit" class="btn btn-primary">{{ trans('doctor.profile.save_info') }}</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>

        <div class="row g-5 mt-1">
            <div class="col-xl-8 offset-xl-4">
                <div class="card card-flush py-4">
                    <div class="card-header">
                        <div class="card-title"><h2>{{ trans('doctor.profile.change_password') }}</h2></div>
                    </div>
                    <div class="card-body pt-0">
                        <form method="POST" action="{{ route('doctor.profile.password') }}">
                            @csrf
                            @method('PUT')
                            <div class="fv-row mb-5">
                                <label class="form-label fw-semibold">{{ trans('doctor.profile.current_password') }}</label>
                                <input type="password" name="current_password" class="form-control @error('current_password') is-invalid @enderror"/>
                                @error('current_password')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="fv-row mb-5">
                                <label class="form-label fw-semibold">{{ trans('doctor.profile.new_password') }}</label>
                                <input type="password" name="password" class="form-control @error('password') is-invalid @enderror"/>
                                @error('password')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="fv-row mb-5">
                                <label class="form-label fw-semibold">{{ trans('doctor.profile.confirm_password') }}</label>
                                <input type="password" name="password_confirmation" class="form-control"/>
                            </div>
                            <button type="submit" class="btn btn-primary">{{ trans('doctor.profile.save_password') }}</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection