@include('Partials.sidebar')

<section class="main_content dashboard_part large_header_bg">
    @include('Partials.header')

    <div class="main_content_iner default_main_contaner_iner">
        <div class="page-body">

            <div class="container-fluid">
                <div class="page-title">
                    <div class="row">
                        <div class="col-sm-6 ps-0"><h3>Add Floor</h3></div>
                        <div class="col-sm-6 pe-0">
                            <ol class="bc">
                                <li><a href="/admin/dashboard" class="bc-home"><i class="fas fa-home"></i></a></li>
                                <li class="bc-sep">›</li>
                                <li><a href="/blocks/dashboard" class="bc-link">Floors</a></li>
                                <li class="bc-sep">›</li>
                                <li class="bc-active">Add</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>

            @if($errors->any())
                <div class="container-fluid">
                    <div class="alert alert-danger alert-dismissible fade show">
                        <ul class="mb-0">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                        <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
                    </div>
                </div>
            @endif

            @if(session('success'))
                <div class="container-fluid">
                    <div class="alert alert-success alert-dismissible fade show">
                        <i class="fas fa-check-circle mr-2"></i>{{ session('success') }}
                        <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
                    </div>
                </div>
            @endif

            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="location-form" style="width:100%">
                            <div class="location-form-header">
                                <h3>Add Floor</h3>
                            </div>
                            <div class="location-form-body">
                                <form action="{{ url('/blocks/store') }}" method="POST">
                                    @csrf
                                    <div class="row">

                                        {{-- Project --}}
                                        <div class="col-xl-4 col-sm-6">
                                            <div class="form-group">
                                                <label class="font-weight-bold">
                                                    Project <span class="text-danger">*</span>
                                                </label>
                                                <select name="project" id="project" class="form-control" required>
                                                    <option value="">— Select Project —</option>
                                                    @foreach($projects as $project)
                                                        <option value="{{ $project->id }}"
                                                            {{ old('project') == $project->id ? 'selected' : '' }}>
                                                            {{ $project->project_name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>

                                        {{-- Master Plan --}}
                                        <div class="col-xl-4 col-sm-6">
                                            <div class="form-group">
                                                <label class="font-weight-bold">
                                                    Master Plan <span class="text-danger">*</span>
                                                </label>
                                                <select name="master_plan" id="master_plan" class="form-control" required>
                                                    <option value="">— Select Master Plan —</option>
                                                    @foreach($masterPlans as $masterPlan)
                                                        <option value="{{ $masterPlan->id }}"
                                                            {{ old('master_plan') == $masterPlan->id ? 'selected' : '' }}>
                                                            {{ $masterPlan->master_plan_name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>

                                        {{-- Floor Name --}}
                                        <div class="col-xl-4 col-sm-6">
                                            <div class="form-group">
                                                <label class="font-weight-bold">
                                                    Floor Name <span class="text-danger">*</span>
                                                </label>
                                                <input type="text"
                                                       name="block_name"
                                                       value="{{ old('block_name') }}"
                                                       class="form-control"
                                                       placeholder="e.g. Ground Floor, Floor 1"
                                                       required>
                                            </div>
                                        </div>

                                        {{-- Floor Number --}}
                                        <div class="col-xl-4 col-sm-6">
                                            <div class="form-group">
                                                <label class="font-weight-bold">Floor Number</label>
                                                <input type="number"
                                                       name="floor_number"
                                                       value="{{ old('floor_number') }}"
                                                       class="form-control"
                                                       placeholder="e.g. 0, 1, 2">
                                                <small class="text-muted">Optional. Use 0 for ground floor.</small>
                                            </div>
                                        </div>

                                    </div>

                                    <div class="d-flex mt-2" style="gap:10px;">
                                        <button type="submit" class="btn btn-primary">
                                            <i class="fas fa-plus mr-1"></i> Add Floor
                                        </button>
                                        <a href="/blocks/dashboard" class="btn btn-secondary">
                                            <i class="fas fa-times mr-1"></i> Cancel
                                        </a>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

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

<script>
// Filter master plans by selected project
document.getElementById('project').addEventListener('change', function() {
    var projectId = this.value;
    var select    = document.getElementById('master_plan');
    select.innerHTML = '<option value="">Loading...</option>';

    if (!projectId) {
        select.innerHTML = '<option value="">— Select Master Plan —</option>';
        return;
    }

    fetch('/master-plans/' + projectId)
        .then(function(r) { return r.json(); })
        .then(function(data) {
            var html = '<option value="">— Select Master Plan —</option>';
            data.forEach(function(mp) {
                html += '<option value="' + mp.id + '">' + mp.master_plan_name + '</option>';
            });
            select.innerHTML = html;
        })
        .catch(function() {
            select.innerHTML = '<option value="">— Select Master Plan —</option>';
        });
});
</script>

@include('Partials.footer')