@extends('layouts.master')

@section('title', 'Border Stations')

@section('content')

<div class="card">

    <div class="card-header">

        <div class="d-flex justify-content-between">

            <h4>Border Stations</h4>

            <button class="btn btn-primary"
                    data-bs-toggle="modal"
                    data-bs-target="#addBorderStationModal">

                <i class="bi bi-plus-circle"></i>
                Add Border Station

            </button>

        </div>

    </div>

    <div class="card-body">

        <table class="table table-striped" id="stationsTable">

            <thead>
                <tr>
                    <th>Name</th>
                    <th>Code</th>
                    <th>Status</th>
                    <th width="120">Action</th>
                </tr>
            </thead>

            <tbody>

                @foreach($stations as $station)

                <tr>

                    <td>{{ $station->name }}</td>

                    <td>{{ $station->code }}</td>

                    <td>

                        @if($station->status)
                            <span class="badge bg-success">
                                ACTIVE
                            </span>
                        @else
                            <span class="badge bg-danger">
                                DISABLED
                            </span>
                        @endif

                    </td>

                    <td>

                        <button
                            class="btn btn-sm btn-primary edit-station"

                            data-id="{{ $station->id }}"
                            data-name="{{ $station->name }}"
                            data-code="{{ $station->code }}"
                            data-status="{{ $station->status }}">

                            <i class="bi bi-pencil"></i>

                        </button>

                    </td>

                </tr>

                @endforeach

            </tbody>

        </table>

    </div>

</div>




@include('border-stations.partials.add-border-station-modal')
@include('border-stations.partials.edit-border-station-modal')

@push('scripts')

<script>

$(document).ready(function () {

    $('#stationsTable').DataTable({
        pageLength: 25
    });

});

$(document).on('click', '.edit-station', function(){

    let id = $(this).data('id');

    $('#edit_name').val($(this).data('name'));
    $('#edit_code').val($(this).data('code'));
    $('#edit_status').val($(this).data('status'));

    $('#editBorderStationForm').attr(
        'action',
        "{{ url('border-stations') }}/" + id
    );

    const modal = new bootstrap.Modal(
        document.getElementById('editBorderStationModal')
    );

    modal.show();

});

</script>

@endpush
@endsection