@extends('layouts.app')

@section('page_title', 'Add Station')

@section('content')

    <div class="card-header border-0 bg-transparent py-2">
        <h5 class="mb-0 fw-bold text-dark" style="font-size: 1.25rem;">Add New Station</h5>
    </div>
    <div class="card-body py-2">
        <form action="#" method="POST" id="addStationForm">
            @csrf
            <div class="mb-2">
                <label for="stationCode" class="form-label mb-1">Station Code</label>
                <input type="text" class="form-control form-control-sm" id="stationCode" name="stationCode" required>
            </div>
            <div class="mb-2">
                <label for="stationName" class="form-label mb-1">Station Name</label>
                <input type="text" class="form-control form-control-sm" id="stationName" name="stationName" required>
            </div>
            <div class="mb-2">
                <label for="stationLocation" class="form-label mb-1">Station Location</label>
                <input type="text" class="form-control form-control-sm" id="stationLocation" name="stationLocation" required>
            </div>
            <div class="mb-2">
                <label for="mapUrl" class="form-label mb-1">Map URL</label>
                <input type="url" class="form-control form-control-sm" id="mapUrl" name="mapUrl" required>
            </div>
            <div class="mb-2">
                <label for="latitude" class="form-label mb-1">Latitude</label>
                <input type="text" class="form-control form-control-sm" id="latitude" name="latitude" required>
            </div>
            <div class="mb-2">
                <label for="longitude" class="form-label mb-1">Longitude</label>
                <input type="text" class="form-control form-control-sm" id="longitude" name="longitude" required>
            </div>
            <div class="mb-2">
                <label for="contactNumber" class="form-label mb-1">Contact Number</label>
                <input type="text" class="form-control form-control-sm" id="contactNumber" name="contactNumber" required>
            </div>
            <div class="mb-2">
                <label for="branch" class="form-label mb-1">Branch</label>
                <input type="text" class="form-control form-control-sm" id="branch" name="branch" required>
            </div>
            <div class="d-flex justify-content-end mt-3">
                <a href="{{ url('station-management') }}" class="btn btn-outline-secondary btn-sm me-2" style="margin-right:5px">Cancel</a>
                <button type="submit" class="btn btn-primary btn-sm">Add Station</button>
            </div>
        </form>
    </div>

    <style>
        .card {
            border-radius: 8px;
        }
        .form-control,
        .form-select {
            font-size: 0.85rem;
            border-radius: 4px;
            padding: 0.375rem 0.75rem;
        }
        .form-label {
            font-weight: 500;
            font-size: 0.85rem;
            line-height: 1.2;
        }
        .btn-primary {
            background-color: #E74610;
            border-color: #E74610;
            font-size: 0.85rem;
            padding: 0.375rem 0.75rem;
        }
        .btn-primary:hover {
            background-color: #d63f0e;
            border-color: #d63f0e;
        }
        .btn-outline-secondary {
            font-size: 0.85rem;
            padding: 0.375rem 0.75rem;
        }
        .form-control-sm,
        .form-select-sm {
            height: calc(1.5em + 0.5rem + 2px);
        }
    </style>
@endsection