@extends('layouts.main')

@section('main-container')

<div class="container-xl">

    <div class="card">
        <div class="card-header bg-success text-white">
            🌾 Area Based Planning (Plot Details)
        </div>

        <div class="card-body">

            <form action="{{ route('planning.store') }}" method="POST">
                @csrf

                <!-- BASIC DETAILS -->
                <h5 class="mb-3">📍 Basic Information</h5>
                <div class="row">

                    <div class="col-md-2 mb-2">
                        <label>Area (Acre)</label>
                        <input type="text" name="area" class="form-control">
                    </div>

                    <div class="col-md-2 mb-2">
                        <label>Latitude</label>
                        <input type="text" name="lat" class="form-control">
                    </div>

                    <div class="col-md-2 mb-2">
                        <label>Longitude</label>
                        <input type="text" name="long" class="form-control">
                    </div>

                    <div class="col-md-2 mb-2">
                        <label>Slope %</label>
                        <input type="text" name="slope" class="form-control">
                    </div>

                    <div class="col-md-2 mb-2">
                        <label>Depth of Soil</label>
                        <input type="text" name="soil_depth" class="form-control">
                    </div>

                    <div class="col-md-2 mb-2">
                        <label>Texture Class</label>
                        <input type="text" name="texture_class" class="form-control">
                    </div>

                </div>

                <div class="row">
                    <div class="col-md-3 mb-2">
                        <label>Erodibility Class</label>
                        <input type="text" name="erodibility_class" class="form-control">
                    </div>

                    <div class="col-md-3 mb-2">
                        <label>Land Class</label>
                        <input type="text" name="land_class" class="form-control">
                    </div>

                    <div class="col-md-3 mb-2">
                        <label>Present Land Use</label>
                        <select name="present_land_use" class="form-control">
                            <option>Agricultural</option>
                            <option>Fallow</option>
                            <option>Uncultivable</option>
                        </select>
                    </div>

                    <div class="col-md-3 mb-2">
                        <label>Proposed Land Use</label>
                        <input type="text" name="proposed_land_use" class="form-control">
                    </div>
                </div>

                <hr>

                <!-- EXISTING PHYSICAL -->
                <h5 class="mb-3">🏗 Existing Physical Treatment</h5>
                <div class="row">
                    <div class="col-md-3">
                        <label>Type</label>
                        <select name="existing_type" class="form-control">
                            <option>CCT</option>
                            <option>CB</option>
                            <option>FB</option>
                            <option>SO</option>
                            <option>EGP</option>
                            <option>BGP</option>
                            <option>FP</option>
                        </select>
                    </div>

                    <div class="col-md-2">
                        <label>Length (m)</label>
                        <input type="text" name="length" class="form-control">
                    </div>

                    <div class="col-md-2">
                        <label>Width (m)</label>
                        <input type="text" name="width" class="form-control">
                    </div>

                    <div class="col-md-2">
                        <label>Depth (m)</label>
                        <input type="text" name="depth" class="form-control">
                    </div>

                    <div class="col-md-3">
                        <label>Volume</label>
                        <input type="text" name="volume" class="form-control">
                    </div>
                </div>

                <hr>

                <!-- PROPOSED PHYSICAL -->
                <h5 class="mb-3">🚧 Proposed Physical Treatment</h5>
                <div class="row">

                    <div class="col-md-3">
                        <label>Type of Activity</label>
                        <select name="activity_type" class="form-control">
                            <option>Area Treatment</option>
                            <option>Drainage Line Treatment</option>
                        </select>
                    </div>

                    <div class="col-md-2">
                        <label>No</label>
                        <input type="text" name="no" class="form-control">
                    </div>

                    <div class="col-md-2">
                        <label>Length</label>
                        <input type="text" name="p_length" class="form-control">
                    </div>

                    <div class="col-md-2">
                        <label>Width</label>
                        <input type="text" name="p_width" class="form-control">
                    </div>

                    <div class="col-md-3">
                        <label>Depth</label>
                        <input type="text" name="p_depth" class="form-control">
                    </div>

                </div>

                <hr>

                <!-- AGRONOMIC -->
                <h5 class="mb-3">🌱 Proposed Agronomic Treatment</h5>
                <div class="row">

                    <div class="col-md-4">
                        <label>Type</label>
                        <select name="agro_type" class="form-control">
                            <option>Agro-forestry</option>
                            <option>Agro-horticulture</option>
                        </select>
                    </div>

                    <div class="col-md-4">
                        <label>Plant Name</label>
                        <input type="text" name="plant_name" class="form-control">
                    </div>

                    <div class="col-md-4">
                        <label>No. of Plants</label>
                        <input type="text" name="plant_count" class="form-control">
                    </div>

                </div>

                <hr>

                <!-- REMARK -->
                <div class="mb-3">
                    <label>Remark</label>
                    <textarea name="remark" class="form-control"></textarea>
                </div>

                <button class="btn btn-success">Save Planning</button>

            </form>

        </div>
    </div>

</div>

@endsection