@extends ('../welcome')

@section ('content')
<style>
h4 {
    font-weight: bold;
    color: #17a2b8;
}
</style>
<div class="card">
    <div class="card-header">
        <h4>Unit Types</h4>
    </div>
    <div class="card-body register-card-body mt-5 ml-4">
        <div class="row">
            <div class="col-4">
                <!-- Residential -->
                <form action="{{ route('unitSettings.store') }}" method="POST">
                    @csrf
                    <div class="row" style="margin-bottom:40px;">
                        <h4>Residential Types</h4>
                        <button id="ResidentialAddRow" type="button" class="btn btn-light" style="margin-left: 30px;">
                            <i class="fas fa-plus"></i>
                        </button>
                    </div>
                    <div class="row">
                        <div class="col-6">
                            <div id="ResidentialInputFormRow">
                                <div class="row" style="margin-bottom:20px;">
                                    @forelse($residentials as $residential)
                                    <input type="hidden" name="type[]" value="residential">
                                    <input type="hidden" name="unitSettingId[]" value="{{$residential->id}}">

                                    <div class="col-10">
                                        <input type="text" class="form-control m-input" value="{{$residential->name}}"
                                            name="name[]">
                                    </div>
                                    <div class="col-2">
                                        <button onClick="clickDeletebutton(this)" type="button" title="Delete" class="btn btn-danger"
                                            data-id="{{$residential->id}}" data-toggle="modal"
                                            data-target="#exampleModalCenter">
                                            <i class="fa fa-ban"></i>
                                        </button>
                                    </div>
                                    <br><br>
                                    @empty
                                    <input type="hidden" name="type[]" value="residential">
                                    <div class="col-12">
                                        <input type="text" class="form-control m-input" name="name[]">
                                    </div>
                                    @endforelse
                                </div>

                                <div id="ResidentialNewRow"></div>
                                <div class="col-12" style="display:flex;justify-content:center;">
                                    <button type="submit" class="btn btn-info">Submit</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="col-4">
                <!-- Commercial -->
                <form action="{{ route('unitSettings.store') }}" method="POST">
                    @csrf
                    <div class="row" style="margin-bottom:40px;">
                        <h4>Commercial Types</h4>
                        <button id="CommercialAddRow" type="button" class="btn btn-light" style="margin-left: 30px;">
                            <i class="fas fa-plus"></i>
                        </button>
                    </div>
                    <div class="row">
                        <div class="col-6">
                            <div id="CommercialInputFormRow">
                                <div class="row" style="margin-bottom:20px;">

                                    @forelse($commercials as $commercial)
                                    <input type="hidden" name="type[]" value="commercial">
                                    <input type="hidden" name="unitSettingId[]" value="{{$commercial->id}}">
                                    <div class="col-10">
                                        <input type="text" class="form-control m-input" value="{{$commercial->name}}"
                                            name="name[]">
                                    </div>
                                    <div class="col-2">
                                        <button onClick="clickDeletebutton(this)" type="button" title="Delete" class="btn btn-danger"
                                            data-id="{{$commercial->id}}" data-toggle="modal"
                                            data-target="#exampleModalCenter">
                                            <i class="fa fa-ban"></i>
                                        </button>
                                    </div>
                                    <br><br>
                                    @empty
                                    <input type="hidden" name="type[]" value="commercial">
                                    <div class="col-12">
                                        <input type="text" class="form-control m-input" name="name[]">
                                    </div>
                                    @endforelse

                                </div>

                                <div id="CommercialNewRow"></div>
                                <div class="col-12" style="display:flex;justify-content:center;">
                                    <button type="submit" class="btn btn-info">Submit</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="col-4">
                <!-- Administrative -->
                <form action="{{ route('unitSettings.store') }}" method="POST">
                    @csrf
                    <div class="row" style="margin-bottom:40px;">
                        <h4>Administrative Types</h4>
                        <button id="AdministrativeAddRow" type="button" class="btn btn-light"
                            style="margin-left: 30px;">
                            <i class="fas fa-plus"></i>
                        </button>
                    </div>
                    <div class="row">
                        <div class="col-6">
                            <div id="AdministrativeInputFormRow">
                                <div class="row" style="margin-bottom:20px;">

                                    @forelse($administratives as $administrative)
                                    <input type="hidden" name="type[]" value="administrative">
                                    <input type="hidden" name="unitSettingId[]" value="{{$administrative->id}}">
                                    <div class="col-10">
                                        <input type="text" class="form-control m-input"
                                            value="{{$administrative->name}}" name="name[]">
                                    </div>
                                    <div class="col-2">

                                        <button onClick="clickDeletebutton(this)" type="button" title="Delete" class="btn btn-danger"
                                            data-id="{{$administrative->id}}" data-toggle="modal"
                                            data-target="#exampleModalCenter">
                                            <i class="fa fa-ban"></i>
                                        </button>
                                    </div>
                                    <br><br>
                                    @empty
                                    <input type="hidden" name="type[]" value="administrative">
                                    <div class="col-12">
                                        <input type="text" class="form-control m-input" name="name[]">
                                    </div>
                                    @endforelse

                                </div>

                                <div id="AdministrativeNewRow"></div>
                                <div class="col-12" style="display:flex;justify-content:center;">
                                    <button type="submit" class="btn btn-info">Submit</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-body register-card-body mt-5 ml-4">
        <div class="row">
            <div class="col-6">
                <!-- Finishing -->
                <form action="{{ route('unitSettings.store') }}" method="POST">
                    @csrf
                    <div class="row" style="margin-bottom:40px;">
                        <h4>Finishing Types</h4>
                        <button id="FinishingAddRow" type="button" class="btn btn-light" style="margin-left: 30px;">
                            <i class="fas fa-plus"></i>
                        </button>
                    </div>
                    <div class="row">
                        <div class="col-6">
                            <div id="FinishingInputFormRow">
                                <div class="row" style="margin-bottom:20px;">

                                    @forelse($finishings as $finishing)
                                    <input type="hidden" name="type[]" value="finishing">
                                    <input type="hidden" name="unitSettingId[]" value="{{$finishing->id}}">

                                    <div class="col-10">
                                        <input type="text" class="form-control m-input" value="{{$finishing->name}}"
                                            name="name[]">
                                    </div>
                                    <div class="col-2">
                                        <button onClick="clickDeletebutton(this)" type="button" title="Delete" class="btn btn-danger"
                                            data-id="{{$finishing->id}}" data-toggle="modal"
                                            data-target="#exampleModalCenter">
                                            <i class="fa fa-ban"></i>
                                        </button>
                                    </div>
                                    <br><br>
                                    @empty
                                    <input type="hidden" name="type[]" value="finishing">
                                    <div class="col-12">
                                        <input type="text" class="form-control m-input" name="name[]">
                                    </div>
                                    @endforelse

                                </div>

                                <div id="FinishingNewRow"></div>
                                <div class="col-12" style="display:flex;justify-content:center;">
                                    <button type="submit" class="btn btn-info">Submit</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="col-6">
                <!-- View -->
                <form action="{{ route('unitSettings.store') }}" method="POST">
                    @csrf
                    <div class="row" style="margin-bottom:40px;">
                        <h4>View Types</h4>
                        <button id="ViewAddRow" type="button" class="btn btn-light" style="margin-left: 30px;">
                            <i class="fas fa-plus"></i>
                        </button>
                    </div>
                    <div class="row">
                        <div class="col-6">
                            <div id="ViewInputFormRow">
                                <div class="row" style="margin-bottom:20px;">

                                    @forelse($views as $view)
                                    <input type="hidden" name="type[]" value="view">
                                    <input type="hidden" name="unitSettingId[]" value="{{$view->id}}">

                                    <div class="col-10">
                                        <input type="text" class="form-control m-input" value="{{$view->name}}"
                                            name="name[]">
                                    </div>
                                    <div class="col-2">
                                        <button onClick="clickDeletebutton(this)" type="button" title="Delete" class="btn btn-danger"
                                            data-id="{{$view->id}}" data-toggle="modal"
                                            data-target="#exampleModalCenter">
                                            <i class="fa fa-ban"></i>
                                        </button>
                                    </div>
                                    <br><br>

                                    @empty
                                    <input type="hidden" name="type[]" value="view">
                                    <div class="col-12">
                                        <input type="text" class="form-control m-input" name="name[]">
                                    </div>
                                    @endforelse

                                </div>

                                <div id="ViewNewRow"></div>
                                <div class="col-12" style="display:flex;justify-content:center;">
                                    <button type="submit" class="btn btn-info">Submit</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenter"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Delete Record</h5>
                <button class="btn-close" type="button" data-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure to delete this record ?</p>
            </div>
            <form class="modal-footer" method="post">
                @csrf
                @method('DELETE')
                <button class="btn btn-secondary" type="button" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary yes" type="button">Yes</button>
            </form>
        </div>
    </div>
</div>
<script src="{{asset('asset/plugins/jquery/jquery.min.js')}}"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
// Residential
$("#ResidentialAddRow").click(function() {
    var html = '';
    html += `
    <div id="ResidentialInputFormRow">
        <div class="row" style="margin-top:20px;">
            <div class="col-10">
            <input type="hidden" name="type[]" value="residential">
                <input type="text" class="form-control m-input"
                        name="name[]" required>
            </div>
            <div class="col-2">
                <button id="ResidentialRemoveRow" type="button" class="btn btn-danger">
                <i class="fas fa-trash-alt"></i>
                </button>
            </div>
        </div>
    </div>`;

    $('#ResidentialNewRow').append(html);
});

// remove row
$(document).on('click', '#ResidentialRemoveRow', function() {
    $(this).closest('#ResidentialInputFormRow').remove();
});

// Commercial

$("#CommercialAddRow").click(function() {
    var html = '';
    html += `
    <div id="CommercialInputFormRow">
        <div class="row" style="margin-top:20px;">
            <div class="col-10">
            <input type="hidden" name="type[]" value="commercial">
                <input type="text" class="form-control m-input" 
                        name="name[]" required>
            </div>
            <div class="col-2">
                <button id="CommercialRemoveRow" type="button" class="btn btn-danger">
                <i class="fas fa-trash-alt"></i>
                </button>
            </div>
        </div>
    </div>`;

    $('#CommercialNewRow').append(html);
});

// remove row
$(document).on('click', '#CommercialRemoveRow', function() {
    $(this).closest('#CommercialInputFormRow').remove();
});

// Administrative

$("#AdministrativeAddRow").click(function() {
    var html = '';
    html += `
    <div id="AdministrativeInputFormRow">
        <div class="row" style="margin-top:20px;">
            <div class="col-10">
            <input type="hidden" name="type[]" value="administrative">

                <input type="text" class="form-control m-input" 
                        name="name[]" required>
            </div>
            <div class="col-2">
                <button id="AdministrativeRemoveRow" type="button" class="btn btn-danger">
                <i class="fas fa-trash-alt"></i>
                </button>
            </div>
        </div>
    </div>`;

    $('#AdministrativeNewRow').append(html);
});

// remove row
$(document).on('click', '#AdministrativeRemoveRow', function() {
    $(this).closest('#AdministrativeInputFormRow').remove();
});

// Finishing

$("#FinishingAddRow").click(function() {
    var html = '';
    html += `
    <div id="FinishingInputFormRow">
        <div class="row" style="margin-top:20px;">
            <div class="col-10">
            <input type="hidden" name="type[]" value="finishing">

                <input type="text" class="form-control m-input" 
                        name="name[]" required>
            </div>
            <div class="col-2">
                <button id="FinishingRemoveRow" type="button" class="btn btn-danger">
                <i class="fas fa-trash-alt"></i>
                </button>
            </div>
        </div>
    </div>`;

    $('#FinishingNewRow').append(html);
});

// remove row
$(document).on('click', '#FinishingRemoveRow', function() {
    $(this).closest('#FinishingInputFormRow').remove();
});

// View

$("#ViewAddRow").click(function() {
    var html = '';
    html += `
    <div id="ViewInputFormRow">
        <div class="row" style="margin-top:20px;">
            <div class="col-10">
            <input type="hidden" name="type[]" value="view">

                <input type="text" class="form-control m-input" 
                        name="name[]" required>
            </div>
            <div class="col-2">
                <button id="ViewRemoveRow" type="button" class="btn btn-danger">
                <i class="fas fa-trash-alt"></i>
                </button>
            </div>
        </div>
    </div>`;

    $('#ViewNewRow').append(html);
});

// remove row
$(document).on('click', '#ViewRemoveRow', function() {
    $(this).closest('#ViewInputFormRow').remove();
});

clickDeletebutton = (e) => {
    let modelId = e.getAttribute("data-id");
    console.log(modelId);
    var route = "{{route('unitSettings.destroy',':id')}}";
    route = route.replace(':id', modelId);
    $('#exampleModalCenter').find($('form')).attr('action', route);
}
</script>

@endsection