@extends('admin.layout')

@section('content')



<div class="card-dark col-md-10">
    <h3 class="mb-4">Add New Project</h3>

    <form method="POST"
          action="{{ route('admin.projects.store') }}"
          enctype="multipart/form-data">
        @csrf

        {{-- BASIC DETAILS --}}
        <div class="row">
            <div class="col-md-6 mb-3">
                <label>Project Name</label>
                <input type="text" name="title" class="form-control" required>
            </div>

            <div class="col-md-6 mb-3">
                <label>Location</label>
                <input type="text" name="location" class="form-control">
            </div>

            <div class="col-md-6 mb-3">
                <label>RERA Number</label>
                <input type="text" name="rera" class="form-control">
            </div>

            <div class="col-md-6 mb-3">
                <label>Builder Name</label>
                <input type="text" name="builder" class="form-control">
            </div>

            <div class="col-md-4 mb-3">
                <label>Property Category</label>
                <input type="text" name="category" class="form-control">
            </div>

            <div class="col-md-4 mb-3">
                <label>Typology</label>
                <input type="text" name="typology" class="form-control">
            </div>

            <div class="col-md-4 mb-3">
                <label>Property Type</label>
                <input type="text" name="property_type" class="form-control">
            </div>

            <div class="col-md-4 mb-3">
                <label>Possession</label>
                <input type="text" name="possession" class="form-control">
            </div>
        </div>

        <hr>

        {{-- IMAGE SLIDER --}}
        <div class="mb-3">
            <label>Project Images (Slider) 1360*738</label>
            <input type="file" name="images[]" multiple class="form-control">
            <small class="text-muted">Upload multiple images</small>
        </div>

        <hr>

        {{-- RICH TEXT SECTIONS --}}
        <div class="mb-3">
            <label>Project Overview</label>
            <textarea name="overview" class="form-control editor"></textarea>
        </div>

        <div class="mb-3">
            <label>Project Highlights</label>
            <textarea name="highlights" class="form-control editor"></textarea>
        </div>

        <div class="mb-3">
            <label>Amenities</label>
            <textarea name="amenities" class="form-control editor"></textarea>
        </div>

        <div class="mb-3">
            <label>Location Advantage</label>
            <textarea name="location_advantage" class="form-control editor"></textarea>
        </div>

        <div class="mb-3">
            <label>Google Map Embed Code</label>
            <textarea name="map_embed" class="form-control" rows="3"
                      placeholder="Paste iframe code here"></textarea>
        </div>

        <hr>

        <div class="mb-3">
            <input type="checkbox" name="status" checked>
            <label>Active</label>
        </div>

        <button class="btn btn-warning">Save Project</button>
        <a href="{{ route('admin.projects.index') }}" class="btn btn-secondary ms-2">Back</a>

    </form>
</div>

@endsection

@section('scripts')

<!-- jQuery (required for Summernote) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Summernote JS -->
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.20/dist/summernote-lite.min.js"></script>

<script>
$(document).ready(function () {
    $('.editor').summernote({
        height: 300,
        placeholder: 'Write content here...',
        toolbar: [
            ['style', ['bold', 'italic', 'underline', 'clear']],
            ['font', ['fontsize']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['insert', ['link', 'table']],
            ['view', ['codeview']]
        ]
    });
});
</script>

@endsection