@component('dashboard.components.modal', ['id' => 'viewUserModal', 'title' => 'Bekijk profiel'])
    <div class="row d-flex justify-content-center">
        <img class="rounded-circle mw-100 profile-avatar" src="" style="max-height: 200px;">
    </div>
    <div class="row mt-5">
        <p class="col-12 col-md-4 font-weight-bold">Straat</p>
        <p class="col-12 col-md-8 profile-streetname"></p>
    </div>
    <div class="row mt-3">
        <p class="col-12 col-md-4 font-weight-bold">Huisnummer</p>
        <p class="col-12 col-md-8 profile-housenumber"></p>
    </div>
    <div class="row mt-3">
        <p class="col-12 col-md-4 font-weight-bold">Postcode</p>
        <p class="col-12 col-md-8 profile-postalcode"></p>
    </div>
    <div class="row mt-3">
        <p class="col-12 col-md-4 font-weight-bold">Woonplaats</p>
        <p class="col-12 col-md-8 profile-city"></p>
    </div>
    <div class="row mt-3">
        <p class="col-12 col-md-4 font-weight-bold">Geslacht</p>
        <p class="col-12 col-md-8 profile-sex"></p>
    </div>
    <div class="row mt-3">
        <p class="col-12 col-md-4 font-weight-bold">Geboortedatum</p>
        <p class="col-12 col-md-8 profile-birthday"></p>
    </div>
    <div class="row mt-3">
        <p class="col-12 col-md-4 font-weight-bold">Rijbewijsnummer</p>
        <p class="col-12 col-md-8 profile-driver-license-number"></p>
    </div>
    <div class="row mt-3">
        <p class="col-12 col-md-4 font-weight-bold">IBAN rekeningnr.</p>
        <p class="col-12 col-md-8 profile-bank"></p>
    </div>
    <div class="row mt-3">
        <p class="col-12 col-md-4 font-weight-bold">Naam rekeninghouder.</p>
        <p class="col-12 col-md-8 profile-holder"></p>
    </div>
    <div class="row mt-3">
        <p class="col-12 col-md-4 font-weight-bold">BTW verrekenen?</p>
        <p class="col-12 col-md-8 profile-btw"></p>
    </div>
    <div class="row mt-3">
        <p class="col-12 col-md-4 font-weight-bold">Naam bedrijf</p>
        <p class="col-12 col-md-8 profile-company-name"></p>
    </div>
    <div class="row mt-3">
        <p class="col-12 col-md-4 font-weight-bold">Adres bedrijf</p>
        <p class="col-12 col-md-8 profile-company-address"></p>
    </div>
    <div class="row mt-3 mb-3">
        <p class="col-12 font-weight-bold">Omschrijving</p>
        <p class="col-12 mt-2 profile-description"></p>
    </div>
@endcomponent

@section('scripts')
    @parent

    <script>
        $('#viewUserModal').on('show.bs.modal', function(e) {
            var profileContent = $(e.relatedTarget).data('profile');

            $(e.currentTarget).find('.profile-avatar').attr('src', profileContent.avatar);
            $(e.currentTarget).find('.profile-streetname').html(profileContent.streetname);
            $(e.currentTarget).find('.profile-housenumber').html(profileContent.house_number);
            $(e.currentTarget).find('.profile-postalcode').html(profileContent.postalcode);
            $(e.currentTarget).find('.profile-city').html(profileContent.city);
            $(e.currentTarget).find('.profile-sex').html(profileContent.sex);
            $(e.currentTarget).find('.profile-birthday').html(profileContent.birthday);
            $(e.currentTarget).find('.profile-driver-license-number').html(profileContent.drivers_license_number);
            $(e.currentTarget).find('.profile-bank').html(profileContent.bank);
            $(e.currentTarget).find('.profile-holder').html(profileContent.holder);
            if (profileContent.btw === 1) {
                $(e.currentTarget).find('.profile-btw').html('Ja');
            } else if (profileContent.btw === 0) {
                $(e.currentTarget).find('.profile-btw').html('Nee');
            } else {
                $(e.currentTarget).find('.profile-btw').html('');
            }
            $(e.currentTarget).find('.profile-company-name').html(profileContent.company_name);
            $(e.currentTarget).find('.profile-company-address').html(profileContent.company_address);
            $(e.currentTarget).find('.profile-description').html(profileContent.description);
        });
    </script>
@endsection