@extends('layouts.master')
@section('content')
<div class="card">
    <div class="card-header card-custom-bg d-flex flex-row align-items-center justify-content-between">
        <h5>Room type list</h5>
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#roomTypeModal">Create New</button>
    </div>
    <div class="card-body">
        <div class="row ">
            <div class="col-md-12">
                <table class="table" id="myTable">
                    <thead class="thead-light">
                        <tr>
                            <th>SN</th>
                            <th>Room Type</th>
                            <th>Cost Per Bed</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @php
                            $sn = 0;
                        @endphp
                        @foreach($roomTypes as $roomType)
                            <tr>
                                <td>{{ ++$sn }}</td>
                                <td>{{ $roomType->name }}</td>
                                <td>{{ round($roomType->cost_per_bed) }}</td>
                                <td class="d-flex justify-content-start">
                                    <button type="button" class="btn btn-sm btn-primary mr-1" data-toggle="modal"
                                    data-target="#roomTypeModal" data-action="edit" data-id="{{ $roomType->id }}"
                                    data-name="{{ $roomType->name }}" data-cost_per_bed="{{ round($roomType->cost_per_bed) }}">Edit</button>
                                    <form action="{{ route('room-type.destroy', $roomType->id) }}" method="post">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-sm btn-danger">Delete</button>
                                    </form>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="roomTypeModal" tabindex="-1" role="dialog" aria-labelledby="roomTypeModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="roomTypeModalLabel">Create/Edit Room Type</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="roomTypeForm" method="post">
                    @csrf
                    <input type="hidden" name="_method" id="formMethod">
                    <div class="form-group">
                        <label for="name">Name</label>
                        <input type="text" class="form-control" id="name" name="name" required>
                    </div>
                    <div class="form-group">
                        <label for="cost_per_bed">Cost Per Bed</label>
                        <input type="number" class="form-control" id="cost_per_bed" name="cost_per_bed" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary" form="roomTypeForm">Save</button>
            </div>
        </div>
    </div>
</div>

@endsection
@section('scripts')
<script type="text/javascript">
   $(document).ready(function() {
        $('#roomTypeModal').on('show.bs.modal', function(event) {
            var button = $(event.relatedTarget);
            var action = button.data('action');
            var id = button.data('id');
            var name = button.data('name');
            var cost_per_bed = button.data('cost_per_bed');

            var modal = $(this);
            var form = modal.find('form');
            var method = id ? 'PUT' : 'POST';
            modal.find('[name="_method"]').val(method);

            if (action === 'edit') {
                form.attr('action', '/room-type/update/' + id);
                modal.find('.modal-title').text('Edit Hostel');
                modal.find('#name').val(name);
                modal.find('#cost_per_bed').val(cost_per_bed);
                modal.find('#id').val(id);
            } else {
                form.attr('action', '{{ route("room-type.store") }}');
                modal.find('.modal-title').text('Create New Hostel');
                modal.find('#name').val('');
                modal.find('#cost_per_bed').val('');
                modal.find('#id').val('');
            }
        });
    });
</script>
@endsection