@extends('tenant.layouts.master')

@section('style')
    <link rel="stylesheet" href="{{ asset('css/rentals/floors/index.css') }}">
@endsection

@section('breadcrumb')
    @include('tenant.layouts.breadcrumb', [
        'items' => [
            __('breadcrumb.rentals') => '/rentals',
            __('breadcrumb.floors') => route('tenant.rentals.floors.index'),
            __('breadcrumb.add_new_floor') => '#',
        ],
    ])
@endsection

@section('sidebar')
    @include('tenant.layouts.sidebar', ['activeItem' => 'rentals.floors'])
@endsection

@section('content')
    <section>
        <x-tenant.shared.backward-component :direct-to="__('breadcrumb.floors')" link="/rentals/floors" />

        <form onsubmit="handleSubmit(event)" action="{{ route('tenant.rentals.floors.store') }}" method="POST"
            class="pb-3 rounded card">
            @csrf

            <div class="card-header py-2 d-flex">
                <h4>@lang('rentals/floors/create.add_new_floor')</h4>
            </div>

            <div class="card-body">
                <div class="row mt-3">
                    <div class="col-3 mb-3">
                        <label for="number" class="fw-bold">@lang('rentals/floors/create.number')</label>
                        <input type="number" min="0" class="form-control" id="number" name="number"
                            value="{{ $floor_number }}" readonly>
                    </div>

                    <div class="col-3 mb-3">
                        <label for="building_id" class="fw-bold rs">@lang('rentals/floors/create.building')</label>
                        <select name="building_id" id="building_id" required>
                            @foreach ($buildings as $building)
                                <option value="{{ $building->id }}" {{ $building_id == $building->id ? 'selected' : '' }}>
                                    {{ $building->title }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-3 mb-3">
                        <label for="title" class="fw-bold rs">@lang('rentals/floors/create.name')</label>
                        <input type="text" class="form-control" id="title" name="title" value="{{ old('title') }}"
                            placeholder="{{__('rentals/floors/create.floor_name')}}" required>
                    </div>

                    <div class="col-3 mb-3">
                        <label for="area" class="fw-bold rs">@lang('rentals/floors/create.area')</label>
                        <input type="number" min="0" class="form-control" id="area" name="area"
                            value="{{ old('area') }}" placeholder="{{__('rentals/floors/create.floor_area')}}" required>
                    </div>
                </div>

                <div class="row">
                    <div class="col-3 mb-3">
                        <label for="shops_area" class="fw-bold rs"> @lang('rentals/floors/create.shops_area')</label>
                        <input type="number" name="shops_area" id="shops_area" class="form-control"
                            value="{{ old('shops_area') }}" required>
                    </div>

                    <div class="col-3 mb-3">
                        <label for="booths_area" class="fw-bold rs">@lang('rentals/floors/create.deterioration_or_corridors_area')</label>
                        <input type="number" name="booths_area" id="booths_area" class="form-control"
                            value="{{ old('booths_area') }}" required>
                    </div>

                    <div class="col-3 mb-3">
                        <label for="notice" class="fw-bold">@lang('rentals/floors/create.notes')</label>
                        <textarea class="form-control" name="notice" id="notice">{{ old('notice') }}</textarea>
                    </div>
                </div>
            </div>

            <div class="text-center">
                <button type="submit" class="btn orange-btn">@lang('general.add')</button>
            </div>
        </form>
    </section>
@endsection

@push('script')
    <script>
        $(() => {
            let building_id = $('#building_id').val();
            if (building_id) {
                let floor_number = $('#number').val();
                if (!floor_number) {
                    getFloorNumber(building_id);
                }
            }

            $('#building_id').on('change', function() {
                let building_id = $(this).val();
                getFloorNumber(building_id);
            });

            function getFloorNumber(building_id) {
                axios.get('/api/rentals/buildings/' + building_id)
                    .then(response => {
                        let building = response.data.building;
                        let floors_count = building.floors.length + 1;
                        let floor_number = building.number + (floors_count.toString().padStart(3, '0'));
                        $('#number').val(floor_number);
                    })
                    .catch(error => {
                        console.log(error);
                    });
            }
        });
    </script>
@endpush