@extends('layout.side-menu')

@section('subhead')
    <title>Profile</title>
@endsection

@section('breadcrumb')
    <div class="-intro-x breadcrumb mr-auto hidden sm:flex">
        <a href="/" class="">Application</a>
        <i data-feather="chevron-right" class="breadcrumb__icon"></i>
        <a href="{{ route('profile') }}" class="breadcrumb--active">Profile</a>
    </div>
@endsection

@section('subcontent')
    <div class="intro-y flex items-center mt-8">
        <h2 class="text-lg font-medium mr-auto">{{ $user->name }}</h2>
    </div>
    <!-- BEGIN: Profile Info -->
    <div class="intro-y box px-5 pt-5 mt-5">
        <div class="flex flex-col lg:flex-row border-b border-gray-200 pb-5 -mx-5">
            <div class="flex flex-1 px-5 items-center justify-center lg:justify-start">
                <div class="w-20 h-20 sm:w-24 sm:h-24 flex-none lg:w-32 lg:h-32 image-fit relative">
                    <img alt="Midone Laravel Admin Dashboard Starter Kit"
                         class="rounded-full"
                         src="{{ $user->getPhoto() }}"
                         id="profilePicture">
                    <label for="fileProfile" class="absolute mb-1 mr-1 flex items-center justify-center bottom-0 right-0 bg-theme-1 rounded-full p-2" style="cursor: pointer;">
                        <input type="file" accept="image/*" required name="fileProfile" id="fileProfile" style="display: none;">
                        <i class="w-4 h-4 text-white" data-feather="camera"></i>
                    </label>
                </div>
                <div class="ml-5">
                    <div class="w-24 sm:w-40 truncate sm:whitespace-normal font-medium text-lg">{{ $user->name }}</div>
                    <div class="text-gray-600 flex items-center">
                        <i data-feather="at-sign" class="w-4 h-4 mr-1"></i>
                        {{ $user->email }}
                    </div>
                </div>
            </div>
            <div class="flex mt-6 lg:mt-0 items-center lg:items-start flex-1 flex-col justify-center text-gray-600 px-5 border-l border-r border-gray-200 border-t lg:border-t-0 pt-5 lg:pt-0">
                <div class="truncate sm:whitespace-normal flex items-center">
                    <i data-feather="triangle" class="w-4 h-4 mr-2"></i> {{ $user->gender }}
                </div>
                <div class="truncate sm:whitespace-normal flex items-center mt-3">
                    <i data-feather="unlock" class="w-4 h-4 mr-2"></i>
                    @foreach ($user->getRoleNames() as $rol)
                        {{ $rol }}
                    @endforeach
                </div>
            </div>
        </div>
        @php
            $tab = 'account-and-profile'
        @endphp
        <div class="nav-tabs flex flex-col sm:flex-row justify-center lg:justify-start">

            <a data-toggle="tab" data-target="#account-and-profile" href="javascript:;"
                class="py-4 sm:mr-8 {{(isset($tab) && $tab == 'account-and-profile') ? 'active' : null}}">
                {{__('Account')}}
            </a>
            <a data-toggle="tab" data-target="#account-password" href="javascript:;"
                class="py-4 sm:mr-8 {{(isset($tab) && $tab == 'account-password') ? 'active' : null}}">
                {{__('Password')}}
            </a>
        </div>
    </div>
    <!-- END: Profile Info -->
    <div class="intro-y tab-content mt-5">
        <div class="tab-content__pane {{(isset($tab) && $tab == 'account-and-profile') ? 'active' : null}}" id="account-and-profile">
            <div class="grid grid-cols-12 gap-6">
                <div class="intro-y box col-span-12 p-5">
                    @include('pages.profile.fields', ['model' => $user])
                </div>
            </div>
        </div>
        <div class="tab-content__pane {{(isset($tab) && $tab == 'account-password') ? 'active' : null}}" id="account-password">
            <div class="grid grid-cols-12 gap-6">
                <div class="intro-y box col-span-12 p-5">
                    <form method="POST" action="{{ route('profile.update.password', $user->id) }}" class="grid grid-cols-12 gap-6 mt-5 form-validator">
                        @csrf
                        @method('PUT')
                        <div class="intro-y col-span-12 lg:col-span-6">
                            <div class="intro-y box">
                                <div class="preview">
                                    <!-- INPUT:password -->
                                    <div class="required">
                                        <label>{{__('validation.attributes.password_new')}}</label>
                                        <input type="password"
                                                class="input w-full border mt-2 {{ $errors->has('password') ? 'error' : '' }}"
                                                name="password"
                                                minlength="6"
                                                required 
                                                data-rule='required|minlength-5'
                                                placeholder="{{__('validation.attributes.password_new')}}">
                                            @if ($errors->has('password'))
                                                <div class="error text-truncate" data-type="validator-error" title="{{ $errors->first('password') }}">
                                                    {{ $errors->first('password') }}
                                                </div>
                                            @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="intro-y col-span-12 lg:col-span-6">
                            <div class="intro-y box">
                                <div class="preview">
                                    <!-- INPUT:password_confirmation -->
                                    <div class="required">
                                        <label>{{__('validation.attributes.password_confirmation')}}</label>
                                        <input type="password"
                                                class="input w-full border mt-2 {{ $errors->has('password_confirmation') ? 'error' : '' }}"
                                                name="password_confirmation"
                                                minlength="6"
                                                required 
                                                data-rule='required|minlength-5'
                                                placeholder="{{__('validation.attributes.password_confirmation')}}">
                                            @if ($errors->has('password_confirmation'))
                                                <div class="error text-truncate" data-type="validator-error" title="{{ $errors->first('password_confirmation') }}">
                                                    {{ $errors->first('password_confirmation') }}
                                                </div>
                                            @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="intro-y col-span-12">
                            <div class="flex items-center">
                                <button type="submit" class="button bg-theme-1 text-white">{{__('app.acept')}}</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        var inputElement = document.getElementById("fileProfile"),
            url = @json(route('profile.update.profile.picture', $user->id))
        inputElement.addEventListener("change", handleFiles, false);
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        function handleFiles() {
            var formData = new FormData();
            formData.append("file", this.files[0]);
            $.ajax({
                url : url,
                type : 'POST',
                data : formData,
                cache: false,
                contentType: false,
                processData: false,
                success : function(data) {
                    document.getElementById("profilePicture").src = data.src
                }
            });
        }
    </script>
@endpush