@extends('admin.layout.index')
@section('title')
    {{ __('messages.property') }}
@endsection
@section('css')
    <style>
        .center-test {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

        }

        .form-input-test {
            width: 350px;
            padding: 20px;
            background: #fff;
            box-shadow: -3px -3px 7px rgba(94, 104, 121, 0.377),
                3px 3px 7px rgba(94, 104, 121, 0.377);
            margin-bottom: 50px;
            margin-top: 50px;
        }

        .form-input-test img {
            width: 100%;
            margin-bottom: 30px;
            position: relative;
            max-height: 100%;
            border: 4px solid #fff;

        }

        .form-input-test input {
            display: none;
        }

        .form-input-test label {
            display: block;
            width: 45%;
            height: 45px;
            line-height: 50px;
            text-align: center;
            background: #1172c2;
            color: #fff;
            font-size: 15px;
            font-family: "Open Sans", sans-serif;
            text-transform: Uppercase;
            font-weight: 600;
            border-radius: 5px;
            cursor: pointer;
            margin: auto;
        }
    </style>
@endsection
@section('content')
    <div class="content-header">

    </div>
    <div class="content">
        <div class="col-12">
            <div class="box box-default">
                <div class="box-header with-border">
                    <h4 class="box-title">{{ __('messages.add-property') }}</h4>
                </div>
                <form method="post" action="{{ route('property.table') }}" enctype="multipart/form-data">
                    <!-- /.box-header -->
                    <div class="box-body">
                        <!-- Nav tabs -->

                        <!-- Tab panes -->

                        <div class="tab-content tabcontent-border">
                            <div class="tab-pane {{ session('back') == null ? 'active' : '' }} {{ session('back') != null && session('back')['open'] == 1 ? 'active' : '' }} "
                                id="arabic" role="tabpanel">
                                <div class="p-15">
                                    <div class="row justify-content-between d-flex">
                                        <div class="col-md-10">
                                            <div id="tablesContainer"></div>
                                            <table id="tableId" class="table product-overview">
                                                <thead>
                                                    <tr>
                                                        <th>{{ __('messages.name') }}</th>
                                                        <th>{{ __('messages.value') }}</th>
                                                        <th>{{ __('messages.delete') }}</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @if (old('row'))
                                                        @foreach (old('row') as $rowIndex => $r)
                                                            <tr>
                                                                @foreach ($r as $colIndex => $value)
                                                                    <td>
                                                                        <input type="text"
                                                                            name="row[{{ $rowIndex }}][{{ $colIndex }}]"
                                                                            value="{{ old("row.$rowIndex.$colIndex") }}"
                                                                            placeholder="{{ $colIndex }}">

                                                                    </td>
                                                                @endforeach
                                                                <td><button class="btn-danger"
                                                                        onclick="removeRow(this)">{{ __('messages.remove') }}</button>
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                    @endif
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="col-md-2 ">
                                            <button type="button" class="btn btn-primary pull-right" onclick="addRow(1)">
                                                {{ __('messages.add-property') }}

                                            </button>
                                        </div>
                                    </div>



                                </div>
                            </div>

                        </div>

                    </div>
                    <input type="hidden" value="{{ $table_id }}" name="table_id">
                    <input type="hidden" value="{{ $fleet_id }}" name="fleet_id">
                    <input type="hidden" value="{{ csrf_token() }}" name="_token">
                    <!-- /.box-body -->
                    <div class="box-footer justify-content-between d-flex">
                        <button type="submit" class="btn btn-rounded btn-primary btn-outline">
                            Save
                        </button>

                        <a href="{{ route('fleet.fleets.show', ['id' => $fleet_id]) }}">
                            <button type="button" class="btn btn-rounded btn-primary btn-outline">
                                {{-- <i class="ti-back"></i> --}}
                                Back
                            </button>
                        </a>
                    </div>
                </form>
            </div>
            <!-- /.box -->
        </div>
    </div>
@endsection
@section('js')
    <script>
        let rowCount = {{ old('row') ? max(array_keys(old('row'))) : 0 }};

        console.log('max', rowCount);

        function addRow() {

            rowCount++;
            const property = document.getElementById('tableId');
            const tbody = property.querySelector('tbody');
            console.log(rowCount);
            const rowIndex = rowCount;

            // Define custom HTML for the row structure
            const newRow = document.createElement('tr');
            newRow.innerHTML = `
      <td><input type="text" name="row[${rowIndex}][name]" placeholder="Name" required/></td>
      <td><input type="text" name="row[${rowIndex}][value1]" placeholder="Value1"  required/></td>
      <td><button class="btn-danger" onclick="removeRow(this)">{{ __('messages.remove') }}</button></td>
      `;

            tbody.appendChild(newRow);
        }

        function removeRow(button) {
            const row = button.parentElement.parentElement;
            row.remove();
        }
    </script>
@endsection
<!--
      <td><input type="text" name="row[${rowIndex}][value2]" placeholder="Value2" /></td>
-->