@extends ('../welcome')


@section ('content')

<div class="card-info" style="padding:5px;">
    <div class="card-header border-transparent">
        <h3 class="card-title">Unit Reservation for Client: <a
                href="{{route('clients.show', $client->id)}}">{{$client->name}}</a></h3>
    </div>
    <br>
    <form method="post" action="{{route('AssignUnit', $client->id)}}">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        @csrf

        <input type="hidden" name="client_id" value="{{$client->id}}">

        <div class="row" style="margin-left:5px;">
            <div class="col-6 mb-3" style="display: inline-block;">
                <label for="project_id">Select Project</label>
                <select name="project_id" id="projects" class="custom-select form-control-border">
                    <option></option>
                    @foreach ($projects as $project)
                    <option value="{{ $project->id }}">{{ $project->name }}</option>
                    @endforeach
                </select>
                </div>
            </div>
            <div class="row" style="margin-left:5px;">
            <div class="col-3 mb-3" style="display: inline-block;">
                <label for="unit_id">Choose unit</label>
                <select name="unit_id" id="units" class="custom-select form-control-border">
     
               </select>
            </div>
            
            <div class="col-3 mb-3" style="display: inline-block;">
                <label for="status">Status</label>
                <select name="status" class="select2 custom-select form-control-border">
                    <option value="hold">hold</option>
                    <option value="reserved">reserved</option>
                    <option value="downpayment">downpayment</option>
                    <option value="taken">taken</option>
                </select>
            </div>
        </div>
        <label for="facilities" style="margin-left:20px;">Has Facilities ?</label>
        <div id="facilities" style="margin-left:20px;">
        
        </div>
        <br>
        <div id="inputFormPayment" style="margin-left: 9px;">
            <div class="row">
                <div class="col-3" style="display: inline-block">
                    <label>Payment Description</label>
                    <input type="text" class="form-control m-input" placeholder="Description"
                        name="payment[0][description]" required>
                </div>
                <div class="col-3" style="display: inline-block">
                    <label>Payment Amount</label>
                    <input type="number" class="form-control m-input" placeholder="Amount" name="payment[0][amount]"
                        required>
                </div>
                <button id="addPayment" type="button" class="btn btn-info" style="margin-top:33px">
                    <i class="fa fa-plus" aria-hidden="true"></i>
                </button>
            </div>
            <div id="newPayment"></div>
        </div>
        <div class="col-6" style=" margin-top:70px;margin-left:20%">
            <button type="submit" class="btn btn-primary">Submit</button>
        </div>
</div>
<br>

</form>

<script src="{{asset('asset/plugins/jquery/jquery.min.js')}}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
$("#addPayment").click(function() {
    var currentCount = $('#inputFormPayment .row').length;
    currentCount += 1;
    console.log(currentCount);
    var html = '';
    html += `
        <div id="inputFormPayment">
            <div class="row">
                <div class="col-3" style="display: inline-block">
                    <label>Payment Description</label>
                    <input type="text" class="form-control m-input" placeholder="Description"
                        name="payment[${currentCount}][description]">
                </div>
                <div class="col-3" style="display: inline-block">
                    <label>Payment Amount</label>
                    <input type="number" class="form-control m-input" placeholder="Amount"
                        name="payment[${currentCount}][amount]">
                </div>

                <div class="col-2" style="padding-top:35px;margin-top:-15px">
                    <button id="removePayment" type="button" class="btn btn-danger">
                    <i class="fas fa-trash-alt"></i>
                    </button>
                </div>
            </div>
        </div>`;

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

// remove row

$(document).on('click', '#removePayment', function() {
    $(this).closest('#inputFormPayment').remove();
});

$(document).on('change', '#projects', function() {
    console.log(this.value);
    var data = this.value;
    
    $.ajax({
        data: {'project_id': data},
        method: "POST",
        url: "{{route('unitReservation')}}",

        success: function(dataResult) {
            var dataResult = JSON.parse(dataResult);
            // console.log(dataResult.units);
            let facilities = "";  
            let units = "";
            Array.from(dataResult.facilities).forEach(myFunction);
            function myFunction(item, index) {
                facilities += `
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <div class="form-check">
                                    
                                        <input class="form-check-input" name="facility_id[]" id="test" value="` + item.id +`"
                                            type="checkbox">
                                        <label class="form-check-label">`+item.name+`</label>
                                    </div>
                                </div>
                            </div>
                        </div>`;
            }
            document.getElementById("facilities").innerHTML = facilities;

              
            Array.from(dataResult.units).forEach(myFunction2);
            function myFunction2(item, index) {
                units += `<option value="` + item.id +`">` + item.name +`</option>`;
            }
            document.getElementById("units").innerHTML = units;
        }
    });
});
</script><!-- /.card -->
@endsection