@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>Stoppage list</h5>
        {{-- <a href="{{ route('transport-route.create') }}" class="btn btn-sm btn-primary">Add New</a> --}}
        <button class="btn btn-sm btn-primary" id="add-student-btn" data-toggle="modal" data-target="#stoppageModal">Add
            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>Name</th>
                            <th>Route</th>
                            <th>Pickup Time</th>
                            <th>Drop Time</th>
                            <th>Monthly Cost</th>
                            <th width="280px">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @php
                            $sn = 1
                        @endphp
                        @foreach ($stoppages as $stoppage)
                            <tr>
                                <td>{{ $sn++; }}</td>
                                <td>{{ $stoppage->name }}</td>
                                <td>{{ $transport_routes[$stoppage->route_id] }}</td>
                                <td>{{ time_in_am_pm($stoppage->pickup_time) }}</td>
                                <td>{{ time_in_am_pm($stoppage->drop_time) }}</td>
                                <td>{{ round($stoppage->monthly_cost) }}</td>
                                <td>
                                    <button type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#stoppageModal"
                                        data-action="edit"
                                        data-id="{{ $stoppage->id }}"
                                        data-name="{{ $stoppage->name }}"
                                        data-route_id="{{ $stoppage->route_id }}"
                                        data-pickup_time="{{ $stoppage->pickup_time }}"
                                        data-drop_time="{{ $stoppage->drop_time }}"
                                        data-monthly_cost="{{ $stoppage->monthly_cost }}">
                                        Edit
                                    </button>

                                    <form action="{{ route('stoppage.destroy', $stoppage->id) }}" method="POST" style="display:inline;">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-sm btn-danger">Delete</button>
                                    </form>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="stoppageModal" tabindex="-1" role="dialog" aria-labelledby="stoppageModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title" id="stoppageModalLabel">Create/Edit Stoppage</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="stoppageForm" method="POST">
                    @csrf
                    @method('POST')
                    <input type="hidden" id="id" name="id" value="">
                    <div class="form-group">
                        <label for="name">Name</label>
                        <input type="text" name="name" id="name" class="form-control" required>
                    </div>

                    <div class="form-group">
                        <label for="route_id">Route</label>
                        {{ generateDropdown($transport_routes, 'class="form-control select2 route_id" id="route_id" name="route_id" required', '', "Select Route") }}

                    </div>

                    <div class="form-group">
                        <div class="row">
                            <div class="col-md-6">
                                <label for="pickup_time">Pickup Time</label>
                                <input type="time" name="pickup_time" id="pickup_time" class="form-control" required>
                            </div>
                            <div class="col-md-6">
                                <label for="drop_time">Drop Time</label>
                                <input type="time" name="drop_time" id="drop_time" class="form-control" required>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="monthly_cost">Monthly Cost</label>
                        <input type="number" step="0.01" name="monthly_cost" id="monthly_cost" class="form-control" 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="stoppageForm">Save changes</button>
            </div>

        </div>
    </div>
</div>

@endsection

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

            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', '/stoppage/update/' + id);
                modal.find('.modal-title').text('Edit Stoppage');
                modal.find('#name').val(button.data('name'));
                modal.find('#route_id').val(button.data('route_id')).trigger('change');
                modal.find('#pickup_time').val(button.data('pickup_time'));
                modal.find('#drop_time').val(button.data('drop_time'));
                modal.find('#monthly_cost').val(Math.floor(button.data('monthly_cost')));
            } else {
                form.attr('action', '{{ route("stoppage.store") }}');
                modal.find('.modal-title').text('Create New Stoppage');
                modal.find('#name').val('');
                modal.find('#route_id').val('').trigger('change');
                modal.find('#pickup_time').val('');
                modal.find('#drop_time').val('');
                modal.find('#monthly_cost').val('');
            }
        });
    });
</script>
@endsection