@extends('admin.layouts.master')
@section('page_title', __('admin.Add :name' , ['name' =>  __('admin.Amenities')]))

@section('page_heading', __('admin.Add :name' , ['name' =>  __('admin.Amenities')]))

@section('page_text', __('admin.Add :name' , ['name' =>  __('admin.Amenities')]))

@section('page_breadcrumb_icon') <i class="ki-duotone ki-home fs-3 text-gray-500 me-n1"></i> @endsection

@section('page_breadcrumb_item', 'Amenities')

@section('page_breadcrumb_item2', 'Amenities List')

@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="main-card mb-3 card">
            <div class="card-header">
                Create Amenities
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-8">
                        <form action="{{route('amenities.store')}}" method="post" enctype="multipart/form-data" id="amenity_add">
                            @csrf
                            <div class="d-flex flex-column mb-7 fv-row">
                                <label for="name" class="fs-6 fw-semibold mb-2">Amenity Name</label>
                                {!! Form::text('name', null, array('required'=>'required','placeholder' => '','class' => 'form-control')) !!}
                            </div>
                            <div class="d-flex flex-column mb-7 fv-row">
                                <label for="short_description" class="fs-6 fw-semibold mb-2">Short Description <span class="h2_extra">(aim for between 50 and 70 words)</span></label>
                                {!! Form::textarea('short_description', null, array('required'=>'required','placeholder' => '','class' => 'form-control')) !!}
                            </div>
                            <div class="d-flex flex-column mb-7 fv-row">
                                <label for="long_description" class="fs-6 fw-semibold mb-2">Long Description</label>
                                {!! Form::textarea('long_description', null, array('required'=>'required','placeholder' => '','class' => 'form-control')) !!}
                            </div>
                            <div class="d-flex flex-column mb-7 fv-row">
                                <label for="image" class="fs-6 fw-semibold mb-2">Upload Image <span>(optional)</span></label>
                                <input type="file" name="image" id="image" class="form-control" >
                            </div>
                            <label for="image_position" class="fs-6 fw-semibold mb-2">Image Position <span>(optional)</span></label><br>
                            <div class="d-flex flex-column mb-7 fv-row">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="image_position" id="exampleRadios1" value="right" checked>
                                    <label class="form-check-label" for="exampleRadios1">
                                        Image on  right (default)
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="image_position" id="exampleRadios2" value="full">
                                    <label class="form-check-label" for="exampleRadios2">
                                        Image full width (large)
                                    </label>
                                </div>
                            </div>
                            <hr>
                            <h5>Access and Bookings</h5>
                            <div class="d-flex flex-column mb-7 fv-row">
                                <label for="building" class="fs-6 fw-semibold mb-2">Which buildings have access to this amenity?</label><br>
                                @foreach ($building as $build)
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input building_id " name="building_id[]"
                                            id="{{$build->id}}" value="{{$build->id}}">
                                        <label class="form-check-label" for="{{$build->id}}">
                                            {{$build->name}} </label>
                                    </div>
                                @endforeach
                            </div>
                            <div class="d-flex flex-column mb-7 fv-row">
                                <label for="apartment_type" class="fs-6 fw-semibold mb-2">Which type of apartments have access to this amenity?</label><br>
                                @foreach ($apart_type as $type)
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input apartment_type_id" name="apartment_type_id[]"
                                            id="permission-{{$type->id}}" value="{{$type->id}}">
                                        <label class="form-check-label" for="permission-{{$type->id}}">
                                            {{$type->name}} </label>
                                    </div>
                                @endforeach
                            </div>
                            <div class="d-flex flex-column mb-7 fv-row">
                                <label for="bookable" class="fs-6 fw-semibold mb-2">Is this a bookable amenity?</label><br>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="booking" id="exampleRadios3" value="no_booking" checked>
                                    <label class="form-check-label" for="exampleRadios3">
                                        No, booking is not necessary
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="booking" id="exampleRadios4" value="residents">
                                    <label class="form-check-label" for="exampleRadios4">
                                        Yes, residents need to book
                                    </label>
                                </div>
                            </div>
                            <div class="d-flex flex-column mb-7 fv-row">
                                <label for="name" class="fs-6 fw-semibold mb-2">Request Status</label>
                                <select class = 'form-select' data-control = "select2" name="request_status">
                                    <option value="Pending">Pending</option>
                                    <option value="Auto-Approved">Auto-Approved</option>
                                </select>
                            </div>
                            <div class="d-flex flex-column mb-7 fv-row">
                                <label for="closed_date" class="fs-6 fw-semibold mb-2">Add a Closed Day</label><br>
                                <input class="form-control date" type="text" name="closed_date"  value="" autocomplete="off">
                            </div>
                            <div class="d-flex flex-column mb-7 fv-row">
                                <div class="divider"></div>

                                <div class="clearfix">
                                   
                                    <button type="button" id="next-btn"
                                            class="btn-shadow btn-wide float-right   btn-hover-shine btn btn-primary submit-btn">
                                        @lang('admin.Submit')
                                    </button>
                                    <a href="{{ route('amenities.index') }}" id="prev-btn"
                                       class="btn-shadow float-right btn-wide  mr-3 btn btn-outline-secondary">
                                        @lang('admin.Cancel')
                                    </a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('js')
<script>
$(document).ready(function(){
    $('.submit-btn').click(function(){
        
        if (($("input[name*='building_id']:checked").length)<=0) {
            alert("Please check at least 1 building");
        }

        else if (($("input[name*='apartment_type_id']:checked").length)<=0) {
            alert("Please check at least 1 apartment type");
        }else{
            $('#amenity_add').submit()
        }
       
    })

    $(".date").caleran({
        minDate: moment(),
        startEmpty: true,
        showOn: "top",
        arrowOn: "left",
        autoAlign:true,
        calendarCount: 2,
        showHeader: true,
        showFooter: true,
        autoCloseOnSelect: true,
        format: 'DD-MM-YYYY'
        // format : "YYYY-MM-DD"
    });
   
})
</script>
@endsection