@extends('layout.front')

@section('title', 'Lični podaci | Krojačeva škola')
@section('description', 'Pregledaj i ažuriraj svoje lične podatke u Krojačevoj školi. Uredi profil, kontakt informacije i postavke naloga brzo i jednostavno.')
@section('keywords', 'Krojačeva škola, lični podaci, profil, korisnički nalog, informacije, podešavanja, privatnost')

@section('content')
<div class="page-wrapper">

    <!-- Header Account -->
    @include('front-inc._header-account')

    <!-- section main-container -->
    <section class="main-container">

        <div class="container">
            <div class="row">

                <!-- main-content -->
                <div class="main-content col-12">

                    <nav class="breadcrumb-holder" aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('lms.profile') }}">Moj nalog</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Lični podaci</li>
                        </ol>
                    </nav>
                    <!-- breadcrumb end -->

                    <div class="main-title">
                        <h1>Lični podaci</h1>
                    </div>
                    <!-- main-title end -->


                    <!-- user-header -->
                    <div class="user-header">
                        <div class="media">
                            <x-front.media-image :imagePath="$lms_user->details->img_96x96" :alt="$lms_user->first_name .' ' . $lms_user->last_name"></x-front.media-image>
                            <!-- media-image end -->
                            <div class="media-body">
                                <div class="button-holder">
                                    <button class="btn btn-square-blue-45" id="avatar-change">Promena avatara</button>
                                    <button class="btn btn-square-gray-45" id="avatar-delete">Obriši</button>
                                </div>
                                <p><strong>Napomena:</strong> Maksimalna dimenzija je 1000x1000px ili 2MB</p>
                            </div>
                            <!-- media-body end  -->
                        </div>
                        <!-- media end -->
                    </div>
                    <!-- user-header end -->

                    <div class="row">

                        <div class="col-lg-8">
                            <form method="POST" action="{{ route('lms.account-update') }}" enctype="multipart/form-data">
                                @csrf
                                <input id="upload-avatar" type="file" name="avatar" placeholder="" style="visibility: hidden; display: none;">
                                <input type="hidden" id="avatar-remove" name="avatar-remove" value="no">
                                <div class="form-group">
                                    <label for="inputName" class="form-label">Ime</label>
                                    <input type="text" class="form-control" id="inputName" name="first_name" value="{{ $lms_user->first_name }}">
                                </div>
                                <!-- form-group end -->
                                <div class="form-group">
                                    <label for="inputSurname" class="form-label">Prezime</label>
                                    <input type="text" class="form-control" id="inputSurname" name="last_name" value="{{ $lms_user->last_name }}">
                                </div>
                                <!-- form-group end -->
                                <div class="form-group">
                                    <label for="inputEmail" class="form-label">Email</label>
                                    <input type="email" class="form-control" id="inputEmail" name="email" aria-describedby="emailHelp" value="{{ $lms_user->email }}">
                                    <div id="emailHelp" class="form-text"><span><strong>Napomena:</strong> Promena e-mail adrese zahteva ponovnu aktivaciju naloga</span></div>
                                </div>
                                <!-- form-group end -->
                                @if (!$lms_user->is_b2c)
                                    <div class="form-group">
                                        <label for="inputPosition" class="form-label">Pozicija (pr. HR, menadžer, prodaja, komercijalista, asistent...)</label>
                                        <input type="text" class="form-control" id="inputPosition" name="title" value="{{ $lms_user->title }}">
                                    </div>
                                    <!-- form-group end -->
                                    <div class="row select-fields">
                                        <div class="col-lg-4 form-group">
                                            <label for="selectRole" class="form-label">Uloga</label>
                                            <select id="selectRole" class="form-select" disabled="">
                                                <option disabled>Izaberi ulogu</option>
                                                @foreach ($roles as $role)
                                                    <option @if(App\Models\LMSUser::hasRole([$role->id])) selected="selected" @endif value="{{ $role->id }}">{{ $role->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <!-- col end -->
                                        <div class="col-lg-4 form-group">
                                            <label for="inputGroup" class="form-label">Sektor</label>
                                            <select
                                                id="inputGroup"
                                                class="form-select"
                                                @if (!App\Models\LMSUser::hasRole([2]))
                                                    disabled=""
                                                @endif
                                                name="sector_id"
                                            >
                                                <option
                                                    @if ($lms_user->sectors->count() == 0)
                                                        selected="selected"
                                                    @endif
                                                >
                                                    Izaberi sektor
                                                </option>

                                                @foreach ($sectors as $sector)
                                                    <option @if(($lms_user->sectors->count() != 0) && ($lms_user->sectors->first()->id == $sector->id)) selected="selected" @endif value="{{ $sector->id }}">{{ $sector->name }}</option>
                                                @endforeach
                                            </select>
                                            <div class="form-text d-block d-lg-none"><span>* Ova polja može menjati samo administrator naloga</span></div>
                                        </div>
                                        <!-- col end -->
                                        {{-- <div class="col-lg-4 form-group">
                                            <div class="form-inline-button">
                                                <a href="{{ route('lms.contact') }}" class="btn btn-pill-blue-45">Pošaljite poruku administratoru</a>
                                            </div>
                                        </div> --}}
                                        <!-- col end -->
                                        <div class="form-text d-none d-lg-block"><span>* Ova polja može menjati samo administrator naloga</span></div>
                                    </div>
                                    <!-- row end -->
                                @endif
                                <div class="row select-fields">
                                    <div class="col-12">
                                        <div class="form-group label-title">
                                            <label class="form-label">Datum rođenja</label>
                                        </div>
                                        <!-- form-group label-title end -->
                                    </div>
                                    <!-- col end -->
                                    <div class="col-lg-4 form-group">
                                        <select id="selectDateOfBirth" class="form-select" name="b_day">
                                            <option
                                                @if(!$lms_user->details->birthday_date)
                                                    selected="selected"
                                                @endif
                                                disabled
                                            >Izaberi dan</option>
                                            {{-- <option selected>Izaberi dan</option> --}}
                                            @for ($i = 1; $i <= 31; $i++)
                                                <option @if($lms_user->details->birthday_date && (App\Models\Helpers\Date::getDayOfDate($lms_user->details->birthday_date) == $i)) selected @endif value="{{ $i }}">{{ $i }}</option>
                                            @endfor
                                        </select>
                                    </div>
                                    <!-- col end -->
                                    <div class="col-lg-4 form-group">
                                        <select id="inputMonthOfBirth" class="form-select" name="b_month">
                                            <option
                                                @if(!$lms_user->details->birthday_date)
                                                    selected="selected"
                                                @endif
                                                disabled
                                            >Izaberi mesec</option>
                                            @for ($i = 1; $i <= 12; $i++)
                                                <option @if($lms_user->details->birthday_date && (App\Models\Helpers\Date::getMonthOfDate($lms_user->details->birthday_date) == $i)) selected @endif value="{{ $i }}">{{ App\Models\Helpers\Date::getMonthNameSr($i-1) }}</option>
                                            @endfor
                                        </select>
                                    </div>
                                    <!-- col end -->
                                    <div class="col-lg-4 form-group">
                                        <select id="inputYearOfBirth" class="form-select" name="b_year">
                                            <option
                                                @if(!$lms_user->details->birthday_date)
                                                    selected="selected"
                                                @endif
                                                disabled
                                            >
                                                Izaberi godinu
                                            </option>
                                            @for ($i = 1950; $i <= (int) date('Y'); $i++)
                                                <option @if($lms_user->details->birthday_date && (App\Models\Helpers\Date::getYearOfDate($lms_user->details->birthday_date) == $i)) selected @endif value="{{ $i }}">{{ $i }}</option>
                                            @endfor
                                        </select>
                                        <div class="form-text d-block d-lg-none"><span>* Volimo rođendane!</span></div>
                                    </div>
                                    <!-- col end -->
                                    <div class="form-text d-none d-lg-block"><span>* Volimo rođendane!</span></div>
                                </div>
                                <!-- row end -->
                                @if (!$lms_user->is_b2c)
                                    <div class="form-group">
                                        <label for="selectGender" class="form-label">Pol</label>
                                        <select id="selectGender" class="form-select" name="gender">
                                            <option disabled @if($lms_user->details->gender_id == -1) selected @endif>Izaberi pol</option>
                                            @foreach ($gender as $pol)
                                                <option @if( (int) $lms_user->details->gender_id == $pol->id) selected @endif value="{{ $pol->id }}">{{ $pol->name }}</option>
                                            @endforeach
                                        </select>
                                        <div class="form-text"><span>Želimo da se osećate ugodno i dok Vam se obraćamo</span></div>
                                    </div>
                                @endif
                                @include('front.user.partials.account._notification-options')
                                <!-- form-group end -->
                                <div class="form-group">
                                    <button class="btn btn-pill-magenta-45" type="submit">Zapamti</button>
                                </div>
                                <!-- form-group end -->
                            </form>

                            <form method="POST" action="{{ route('lms.password-change') }}">
                                @csrf
                                <div class="password-change">
                                    <h2 class="form-title">Promeni lozinku</h2>
                                    <p class="text-light">Za promenu lozinke, popunite polja i pratite dalje instrukcije. Izbegavajte jednostavne lozinke kako ne bi došlo do zloupotrebe naloga. Vaša sigurnost nam je važna.</p>

                                    <div class="form-group">
                                        <label for="inputOldPassword" class="form-label">Stara lozinka</label>
                                        <input type="password" class="form-control" id="inputOldPassword" name="password_old">
                                    </div>
                                    <!-- form-group end -->
                                    <div class="form-group">
                                        <label for="inputNewPassword" class="form-label">Nova lozinka</label>
                                        <input type="password" class="form-control" id="inputNewPassword" name="password">
                                    </div>
                                    <!-- form-group end -->
                                    <div class="form-group">
                                        <label for="inputRepeatPassword" class="form-label">Ponovite lozinku</label>
                                        <input type="password" class="form-control" id="inputRepeatPassword" name="password_confirmation">
                                    </div>
                                    <!-- form-group end -->
                                    <div class="form-group">
                                        <button class="btn btn-pill-magenta-45" type="submit">Sačuvaj lozinku</button>
                                    </div>
                                    <!-- form-group end -->
                                </div>
                                <!-- password-change end -->

                            </form>
                        </div>
                        <!-- col end -->

                    </div>
                    <!-- row end -->

                </div>
                <!-- main-content end -->

            </div>
            <!-- row end -->
        </div>
        <!-- container end -->

    </section>
    <!-- main-container end -->

    <!-- Footer -->
    @include('front-inc._footer')

</div>
<!--- page-wrapper end -->
@endsection

@section('add-scripts')
<script>
    document.getElementById('avatar-change').addEventListener("click", function(e) {
        e.preventDefault();
        document.getElementById('upload-avatar').click();
    });

    document.getElementById('avatar-delete').addEventListener('click', function(e) {
        e.preventDefault();
        document.getElementById('user-avatar').classList.add('d-none');
        @if ($lms_user->details->avatar == '')
            document.getElementById('default-avatar').classList.remove('d-none');
        @endif
        document.getElementById('user-avatar').setAttribute('src', '');
        document.getElementById('upload-avatar').value = '';
        document.getElementById('avatar-remove').value = 'yes';
    });

    document.getElementById('upload-avatar').addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            document.getElementById('user-avatar').setAttribute('src', URL.createObjectURL(file));
            @if ($lms_user->details->avatar == '')
            document.getElementById('default-avatar').classList.add('d-none');
            @endif
            document.getElementById('user-avatar').classList.remove('d-none');
            document.getElementById('avatar-remove').value = 'no';
        }
    });
</script>
@endsection