@extends('admin.main')

@section('content')
      
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                          <h4 class="">Hospital / Edit<a href="{{ route('hospitals.index') }}" class="btn btn-primary float-right">Back</a></h4>
                        </div>
                        <div class="card-body">                           
                           <form method="POST" action="{{ route('hospitals.update', $hospital->id) }}" enctype="multipart/form-data">
                                <input type="hidden" name="id" value="{{ $hospital->id }}">
                                 @csrf
                                 @method('PUT')
                                <div class="form-group">
                                    <label for="name">Name</label>
                                    <input type="text" class="form-control" id="name" name="name" required placeholder="Enter Name" value="{{ old('name', $hospital->name) }}">
                                    @error('name')
                                        <p class="errors-msg text-danger">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div class="form-group">
                                    <label for="city_id">City</label>
                                     <select name="city_id" id="city_id" class="form-control" required>
                                        <option value="" selected disabled hidden>Select City</option>
                                        @foreach ($city as $s)
                                        <option {{($hospital->city_id == $s->id)?'selected':'';}} value="{{ $s->id }}">{{ ucfirst($s->name) }}</option>
                                        @endforeach
                                    </select>
                                     @error('city_id')
                                        <p class="errors-msg text-danger">{{ $message }}</p>
                                    @enderror
                                </div>
                                <br>
                                <div class="row">
                                    <div class="col-md-12">
                                         <div class="table-responsive"> 
                                            <table class="display table-striped table table-bordered">
                                                <thead>
                                                    <tr>
                                                        <th>#</th>
                                                        <th style="min-width: 200px;">Room Type</th>
                                                        <th></th>
                                                    </tr>
                                                </thead>
                                                <tbody id="add_rooms">
                                                    @if(!empty($rooms))
                                                        @foreach($rooms as $index=>$val)
                                                            <tr row-id="{{$loop->index+1}}">
                                                                <td>{{$loop->index+1}}</td>
                                                                <td><input type="text" name="room_type[]"  id="room_type-{{$loop->index+1}}" class="form-control" value="{{isset($val->name)?$val->name:''}}" required></td>
                                                                <td><i class="i-Remove remove_row text-danger {{(count($rooms) <= 1)?'d-none':''}}"></i></td>
                                                                <input type="hidden" name="room_id[]" id="room_id-{{$loop->index+1}}" value="{{$val->id}}">
                                                            </tr>
                                                        @endforeach
                                                    @endif
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="col-md-12">
                                            <button class="btn btn-primary addRow float-right" id="addRow">Add Rooms</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="status">Status</label>
                                    <div class="custom-control custom-switch">
                                        <input type="checkbox" class="custom-control-input" id="status" value="1" name="status" {{ $hospital->status == 'active' ? 'checked' :''}}>
                                        <label class="custom-control-label" for="status"></label>
                                    </div>
                                     @error('status')
                                        <p class="errors-msg text-danger">{{ $message }}</p>
                                    @enderror
                                </div>
                                <button type="submit" class="btn btn-primary mt-3">Update</button>
                            </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
<script type="text/javascript">
    $(document).ready(function() {
        $("#addRow").click(function(e) {
            e.preventDefault();

            let row_html = createHtml();
            
            $("#add_rooms").append(row_html);
            updateRemoveBtn();
            $("#procedure_id-"+index).change();
        });
    })
    function createHtml()
    {
        var index = $("#add_rooms tr:last").attr("row-id");
        index++;
        
        
        let row_html = `<tr row-id="${index}">
                    <td>${index}</td>
                    <td><input type="text" name="room_type[]"  id="room_type-${index}" class="form-control" value="" required></td>
                    <td><i class="i-Remove remove_row text-danger"></i></td>
                    <input type="hidden" name="room_id[]" id="room_id-${index}" value="">
                </tr>`;
        return row_html;
    }
    function updateRemoveBtn()
    {
        if ($("#add_rooms tr").length > 1 && $("#add_rooms tr:first .remove_row").hasClass('d-none')) {
            $("#add_rooms tr:first .remove_row").removeClass('d-none');
        }
        if ($("#add_rooms tr").length <= 1){
            $("#add_rooms tr:first .remove_row").addClass('d-none');
        }
        $("#add_rooms tr").each(function (index) {
            $(this).find("td:first").html(index + 1);
        });
    }
    $("#add_rooms").on('click', ".remove_row",function (){
        $(this).parents("tr").remove();
        updateRemoveBtn();
    });
</script>
@endsection