@extends('admin.main')
@section('content')
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                           <h4 class="">Hospital / Create  <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.store') }}" enctype="multipart/form-data">
                                @csrf
                                <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') }}">
                                    @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" required class="form-control">
                                        <option value="" selected disabled hidden>Select City</option>
                                        @foreach ($city as $s)
                                        <option 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>Procedure Name</th>
                                                        <th>Price</th>
                                                        <th></th>
                                                    </tr>
                                                </thead>
                                                <tbody id="add_rooms">
                                                    <tr row-id="1">
                                                        <td>1</td>
                                                        <td><input type="text" name="room_type[]"  id="room_type-1" class="form-control" value="" required></td>
                                                        <td>
                                                            <select class="form-control" name="procedure_id[]" id="procedure_id-1" required>
                                                                <option value="">Add Procedure</option>
                                                                @if(!empty($procedure))
                                                                    @foreach($procedure as $in=>$list)
                                                                    <option value="{{$list->id}}" >{{$list->name}}</option>
                                                                    @endforeach
                                                                @endif
                                                            </select>
                                                        </td>
                                                        <td><input step="any" type="number" name="price[]" id="price-1" class="form-control" placeholder="₹" value="0" min="0" required></td>
                                                        <td><i class="i-Remove remove_row text-danger d-none"></i></td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="col-md-12">
                                            <button class="btn btn-primary addRow float-right" id="addRow">Add Service</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" 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">Submit</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><select class="form-control" name="procedure_id[]" id="procedure_id-${index}" required>
                            <option value="">Add Procedure</option>
                            @if(!empty($procedure))
                                @foreach($procedure as $in=>$list)
                                <option value="{{$list->id}}" >{{$list->name}}</option>
                                @endforeach
                            @endif
                        </select></td>
                    <td><input step="any" type="number" name="price[]" id="price-${index}" class="form-control" placeholder="₹" value="0" min="0" required></td>
                    <td><i class="i-Remove remove_row text-danger"></i></td>
                </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