@extends('layouts.app')

@section('title', 'preListing Informaction')

{{-- custom css --}}
@push('css')
<link rel="stylesheet" href="{{ asset('assets/css/custom/preListing.css') }}">
<style>
    .nav-link.active {
        color: white !important;
        background-color: var(--primary) !important;
        /* or any other color */
        border-radius: 0.25rem;
    }
</style>
@endpush

{{-- page connect --}}
@section('content')

<x-content-body>

    <x-breadcrumbs :breadcrumbs="$breadcrumbs" />

    {{-- {{ dd($preListing) }} --}}

    @include('layouts.includes.particles.property.pre-listing.show.property_images_and_summary')


    <div class="row">
        <div class="col-12">
            <div class="row">
                <div class="card">
                    <div class="card-body p-0">
                        <!-- Nav tabs -->
                        <div class="default-tab">
                            <ul class="nav nav-tabs" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link text-black active" data-bs-toggle="tab"
                                        href="#pre-listing-section"><i class="la la-thumbtack me-2"></i> Pre Listing</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link text-black" data-bs-toggle="tab" href="#listing-section"><i
                                            class="la la-envelope me-2"></i> Listing</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link text-black" data-bs-toggle="tab" href="#pending-section"><i
                                            class="la la-sms me-2"></i> Pending</a>
                                </li>
                                <li class="nav-item ">
                                    <a class="nav-link text-black" data-bs-toggle="tab" href="#close-section"><i
                                            class="la la-phone me-2"></i> Close</a>
                                </li>
                                <li class="nav-item m-auto"></li>
                                <li class="nav-item">
                                    <a class="nav-link text-black" data-bs-toggle="tab" href="#task-section"><i
                                            class="la la-phone me-2"></i> Task</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link text-black" data-bs-toggle="tab" href="#assignment-section"><i
                                            class="la la-phone me-2"></i> Assignment</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link text-black" data-bs-toggle="tab" href="#file-section"><i
                                            class="la la-phone me-2"></i> File</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link text-black" data-bs-toggle="tab" href="#action-plan-section"><i
                                            class="la la-phone me-2"></i> Action</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link text-black" data-bs-toggle="tab" href="#activities-section"><i
                                            class="la la-phone me-2"></i> Activities</a>
                                </li>
                            </ul>
                            <div class="tab-content">
                                <div class="tab-pane fade show active" id="pre-listing-section" role="tabpanel">
                                    <div class="row">
                                        <div class="d-flex align-items-start w-100">
                                            <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">

                                                @include('layouts.includes.particles.property.pre-listing.show.pre_listing_tab_nav_links')

                                            </div>
                                            <div class="tab-content w-100 p-3 border" id="v-pills-tabContent">
                                                
                                                @include('layouts.includes.particles.property.pre-listing.show.pre_listing_tab_content')

                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="listing-section">

                                <div class="pt-4">
                                    <h4>listing</h4>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="pending-section">
                                <div class="pt-4">
                                    <h3> Pending section </h3>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="close-section">
                                <div class="pt-4">
                                    <h3> Close section </h3>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="task-section">
                                <div class="pt-4">
                                    <h3> task section </h3>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="assignment-section">
                                <div class="pt-4">
                                    <h3> assignment section </h3>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="file-section">
                                <div class="pt-4">
                                    <h3> file section </h3>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="action-plan-section">
                                <div class="pt-4">
                                    <h3> action plan section </h3>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="activities-section">
                                <div class="pt-4">
                                    <h3> activities section </h3>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

    </div>
    </div>

</x-content-body>>

{{-- @include('layouts.includes.modals.add_task_model')
@include('layouts.includes.modals.add_assignment_model')
@include('layouts.includes.modals.add_file_model')
@include('layouts.includes.modals.add_socialMediaProfile_model') --}}

@endsection

{{-- custom js --}}
@push('js')
<script>
    addNotesRoute         = "{{ route('note.store') }}";
    sendEmailRoute        = "{{ route('send.email.store') }}";
    addSocialProfileRoute = "{{ route('social.profile.store') }}";
    addNewTaskRoute       = "{{ route('task.store') }}";
    addNewAssignmentRoute = "{{ route('assignment.store') }}";
    addNewFileRoute       = "{{ route('file.store') }}";
</script>
<script src="{{ asset('assets/js/custom/property/pre-listing/pre-listing.js') }}"></script>
<script src="{{ asset('assets/js/custom/property/pre-listing/create-form.js') }}"></script>


@endpush