@component('dashboard.components.modal', ['id' => 'viewCamperModal', 'title' => 'Bekijk camper'])
    <div class="row mt-3">
        <p class="col-6 font-weight-bold">Titel</p>
        <p class="col-6 camper-title"></p>
    </div>
    <div class="row mt-3">
        <p class="col-6 font-weight-bold">Slaapplaatsen</p>
        <p class="col-6 camper-sleeping_number"></p>
    </div>
    <div class="row mt-3">
        <p class="col-6 font-weight-bold">Type</p>
        <p class="col-6 camper-kind"></p>
    </div>
    <div class="row mt-3 mb-3">
        <p class="col-12 font-weight-bold mb-1">Omschrijving:</p>
        <p class="col-12 camper-description"></p>
    </div>

    {{-- <hr class="mt-5">
    <h4>Foto's</h4> --}}

    {{-- <hr class="mt-5">
    <h4>Standaard prijzen</h4> --}}

    <hr class="mt-5">
    <h4>Jouw camper</h4>
    <div class="row mt-3">
        <p class="col-6 font-weight-bold">Faciliteiten</p>
        <div class="col-6 camper-facilities"></div>
    </div>

    <div class="row mt-3">
        <p class="font-italic my-2 col-12">Kenmerken</p>
        <p class="col-6 font-weight-bold">Kenteken</p>
        <p class="col-6 camper-plate_number text-uppercase"></p>
    </div>

    <div class="row mt-3">
        <p class="col-6 font-weight-bold">Kilometerstand</p>
        <p class="col-6 camper-kilometers"></p>
    </div>

    <div class="row mt-3">
        <p class="col-6 font-weight-bold">Aantal PK</p>
        <p class="col-6 camper-pk"></p>
    </div>

    <div class="row mt-3">
        <p class="col-6 font-weight-bold">Merk</p>
        <p class="col-6 camper-brand"></p>
    </div>

    <div class="row mt-3">
        <p class="col-6 font-weight-bold">Bouwjaar</p>
        <p class="col-6 camper-build_year"></p>
    </div>

    <div class="row mt-3">
        <p class="col-6 font-weight-bold">Brandstof</p>
        <p class="col-6 camper-fuel"></p>
    </div>

    <div class="row mt-3">
        <p class="col-6 font-weight-bold">Transmissie</p>
        <p class="col-6 camper-transmission"></p>
    </div>

    <div class="row mt-3">
        <p class="col-6 font-weight-bold">Zitplaatsen</p>
        <p class="col-6 camper-seats"></p>
    </div>

    <div class="row mt-3">
        <p class="col-6 font-weight-bold">Aantal gordels volgens kentekenbewijs</p>
        <p class="col-6 camper-seat_belts"></p>
    </div>

    <div class="row mt-3">
        <p class="col-6 font-weight-bold">Soort camper</p>
        <p class="col-6 camper-type text-capitalize"></p>
    </div>

    <div class="row mt-3">
        <p class="col-6 font-weight-bold">Lengte</p>
        <p class="col-6 camper-length"></p>
    </div>

    <div class="row mt-3">
        <p class="col-6 font-weight-bold">Breedte</p>
        <p class="col-6 camper-width"></p>
    </div>

    <div class="row mt-3">
        <p class="col-6 font-weight-bold">Hoogte</p>
        <p class="col-6 camper-height"></p>
    </div>

    <div class="row mt-3">
        <p class="col-6 font-weight-bold">Opties</p>
        <div class="col-6 camper-options"></div>
    </div>

    <div class="row mt-3">
        <p class="font-italic my-2 col-12">Locatie</p>
        <p class="col-6 font-weight-bold">Straatnaam</p>
        <p class="col-6 camper-streetname"></p>
    </div>

    <div class="row mt-3">
        <p class="col-6 font-weight-bold">Huisnummer</p>
        <p class="col-6 camper-house_number"></p>
    </div>

    <div class="row mt-3">
        <p class="col-6 font-weight-bold">Toevoeging</p>
        <p class="col-6 camper-house_number_suffix"></p>
    </div>

    <div class="row mt-3">
        <p class="col-6 font-weight-bold">Postcode</p>
        <p class="col-6 camper-postalcode"></p>
    </div>

    <div class="row mt-3">
        <p class="col-6 font-weight-bold">Plaats</p>
        <p class="col-6 camper-city"></p>
    </div>

    <div class="row mt-3">
        <p class="col-6 font-weight-bold">Provincie</p>
        <p class="col-6 camper-province text-capitalize"></p>
    </div>

    <hr class="mt-5">
    <h4>Huisregels</h4>
    <div class="row mt-3">
        <p class="col-6 font-weight-bold">Minimum leeftijd</p>
        <p class="col-6 camper-minimum_age"></p>
    </div>

    <div class="row mt-3">
        <p class="col-6 font-weight-bold">Regels</p>
        <div class="col-6 camper-rules"></div>
    </div>

    <hr class="mt-5">
    <h4>Verzekeren, pechhulp & vervangend vervoer</h4>
    <div class="row mt-3">
        <p class="col-6 font-weight-bold">Pechhulp</p>
        <p class="col-6 camper-assistance text-capitalize"></p>
    </div>

    <div class="row mt-3">
        <p class="col-6 font-weight-bold">Vervangend vervoer</p>
        <p class="col-6 camper-replacement text-capitalize"></p>
    </div>

    <div class="row mt-3">
        <p class="col-6 font-weight-bold">Verzekeringsmaatschappij</p>
        <p class="col-6 camper-insurance_company text-capitalize"></p>
    </div>

     <div class="row mt-3">
        <p class="col-6 font-weight-bold">Voor het besturen van deze camper is benodigd</p>
        <p class="col-6 camper-type text-capitalize"></p>
    </div>
@endcomponent

@section('scripts')
    @parent

    <script>
        $('#viewCamperModal').on('show.bs.modal', function(e) {
            var camperContent = $(e.relatedTarget).data('camper');

            $(e.currentTarget).find('.camper-title').html(camperContent.title);
            $(e.currentTarget).find('.camper-description').html(camperContent.description);
            $(e.currentTarget).find('.camper-sleeping_number').html(camperContent.sleeping_number);
            $(e.currentTarget).find('.camper-kind').html(camperContent.kind);
            $(e.currentTarget).find('.camper-title').html(camperContent.title);
            $(e.currentTarget).find('.camper-description').html(camperContent.description);
            $(e.currentTarget).find('.camper-sleeping_number').html(camperContent.sleeping_number);
            $(e.currentTarget).find('.camper-kind').html(camperContent.kind);
            $(e.currentTarget).find('.camper-plate_number').html(camperContent.plate_number);
            $(e.currentTarget).find('.camper-kilometers').html(camperContent.kilometers);
            $(e.currentTarget).find('.camper-pk').html(camperContent.pk);
            $(e.currentTarget).find('.camper-brand').html(camperContent.brand);
            $(e.currentTarget).find('.camper-build_year').html(camperContent.build_year);
            $(e.currentTarget).find('.camper-fuel').html(camperContent.fuel);
            $(e.currentTarget).find('.camper-transmission').html(camperContent.transmission);
            $(e.currentTarget).find('.camper-seats').html(camperContent.seats);
            $(e.currentTarget).find('.camper-type').html(camperContent.voor_het_besturen);

            if (camperContent.options) {
                $(e.currentTarget).find('.camper-seat_belts').html(camperContent.options.aantal_gordels);
                $(e.currentTarget).find('.camper-length').html(camperContent.options.lengte);
                $(e.currentTarget).find('.camper-width').html(camperContent.options.breedte);
                $(e.currentTarget).find('.camper-height').html(camperContent.options.hoogte);
            }

            if (camperContent.location) {
                $(e.currentTarget).find('.camper-streetname').html(camperContent.location.streetname);
                $(e.currentTarget).find('.camper-house_number').html(camperContent.location.house_number);
                $(e.currentTarget).find('.camper-house_number_suffix').html(camperContent.location.house_number_suffix);
                $(e.currentTarget).find('.camper-postalcode').html(camperContent.location.postalcode);
                $(e.currentTarget).find('.camper-city').html(camperContent.location.city);
                $(e.currentTarget).find('.camper-province').html(camperContent.location.province);
            }

            if (camperContent.insurance) {
                $(e.currentTarget).find('.camper-assistance').html(camperContent.insurance.pechhulp.replace(/_/g, ' '));
                $(e.currentTarget).find('.camper-replacement').html(camperContent.insurance.vervangend_vervoer.replace(/_/g, ' '));
                $(e.currentTarget).find('.camper-insurance_company').html(camperContent.insurance.verzekeringsmaatschappij.replace(/_/g, ' '));
            }

            // Facilities
            if (camperContent.facilities) {
                Object
                    .keys(camperContent.facilities)
                    .filter(function(key) {
                        return camperContent.facilities[key];
                    })
                    .map(function(value) {
                        $(e.currentTarget).find('.camper-facilities').append('<p class="w-100 text-capitalize">' + value.replace(/_/g, ' ') + '</p>');
                    })
            }

            // Options
            if (camperContent.options) {
                Object
                    .keys(camperContent.options)
                    .filter(function(key) {
                        if (key != 'aantal_gordels' && key != 'lengte' && key != 'hoogte' && key != 'breedte') {
                            return camperContent.options[key];
                        }
                    })
                    .map(function(value) {
                        $(e.currentTarget).find('.camper-options').append('<p class="w-100 text-capitalize">' + value.replace(/_/g, ' ') + '</p>');
                    })
            }


            // Rules
            if (camperContent.rules) {
                $(e.currentTarget).find('.camper-minimum_age').html(camperContent.rules.minimum_leeftijd);

                Object
                    .keys(camperContent.rules)
                    .filter(function(key) {
                        if (key != 'minimum_leeftijd') {
                            return camperContent.rules[key];
                        }
                    })
                    .map(function(value) {
                        $(e.currentTarget).find('.camper-rules').append('<p class="w-100 text-capitalize">' + value.replace(/_/g, ' ') + '</p>');
                    })
            }
        });
    </script>
@endsection