@extends('layout.app')

@section('content')
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title" style="color:#115548;"> Add Cancel Reason
                            </h3>
                        </div>
                        <div class="card-body">
                            <form action="{{ route('cancel-reasons.store') }}" method="POST">
                                @csrf
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="reason">Cancel Reason<span style="color: red;">*</span></label>
                                            <input type="text" class="form-control" id="reason" name="reason"
                                                placeholder="Enter Cancel Reason" required>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label for="status">Status<span style="color: red;">*</span></label>
                                                <select class="form-control" id="status" name="status" required>
                                                    <option value="Active">Active</option>
                                                    <option value="Inactive">Inactive</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <button type="submit" class="btn btn-primary mt-4">Submit</button>
                                    </div>
                                </div>
                            </form>

                        </div>
                    </div>
                </div>
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title" style="color:#115548;">Cancel Reason
                            </h3>
                        </div>
                        <div class="card-body">
                            <table id="example1" class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th>SL</th>
                                        <th>Reason</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($cancelReasons as $cancelReason)
                                        <tr>
                                            <td>{{ $cancelReason->id }}</td>
                                            <td>{{ $cancelReason->reason }}</td>
                                            <td>{{ $cancelReason->status }}</td>
                                            <td>
                                                <!-- Action buttons can be added here -->
                                                <a href="{{ route('cancel-reasons.edit', $cancelReason->id) }}"
                                                    class="btn btn-sm btn-primary">Edit</a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>
@endsection

@section('js')
@endsection
@push('script')
@endpush

@section('ajax')
@endsection