@extends('layouts.master')
@section('title', 'Season List')
@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h3 class="mb-0">Season List</h3>
                        <a href="#" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#seasonModal">
                            Add New
                        </a>
                    </div>

                    <div class="card-body">
                        <table id="seasonTable" class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th>SL</th>
                                    <th>Name</th>
                                    <th>Start Date</th>
                                    <th>End Date</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($seasons as $season)
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td>{{ $season->name }}</td>
                                        <td>{{ $season->start_date }}</td>
                                        <td>{{ $season->end_date }}</td>
                                        <td>
                                            {{-- <a href="{{ route('season.edit', $season->id) }}" class="btn btn-info btn-sm">Edit</a> --}}
                                            <button class="btn btn-info btn-sm edit-season" data-id="{{ $season->id }}"
                                                data-name="{{ $season->name }}" data-start_date="{{ $season->start_date }}"
                                                data-end_date="{{ $season->end_date }}">
                                                Edit
                                            </button>
                                            <form action="{{ route('season.destroy', $season->id) }}" method="POST"
                                                style="display:inline-block;">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-danger btn-sm"
                                                    onclick="return confirm('Are you sure?')">Delete</button>
                                            </form>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="5" class="text-center">No seasons found.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th>SL</th>
                                    <th>Name</th>
                                    <th>Start Date</th>
                                    <th>End Date</th>
                                    <th>Action</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Add Season Modal -->
    <div class="modal fade" id="seasonModal" tabindex="-1" aria-labelledby="seasonModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <form action="{{ route('season.store') }}" method="POST" class="needs-validation" novalidate>
                @csrf
                <div class="modal-content">
                    <div class="modal-header bg-primary text-white">
                        <h5 class="modal-title" id="seasonModalLabel">Add Season</h5>
                        <button type="button" class="btn-close text-white" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                    </div>

                    <div class="modal-body">
                        <div class="row g-3">
                            <div class="col-md-12">
                                <label for="name" class="form-label">Season Name <span
                                        class="text-danger">*</span></label>
                                <input type="text" name="name" id="name" class="form-control" required>
                            </div>

                            <div class="col-md-6">
                                <label for="start_date" class="form-label">Start Date <span
                                        class="text-danger">*</span></label>
                                <input type="date" name="start_date" id="start_date" class="form-control" required>
                            </div>

                            <div class="col-md-6">
                                <label for="end_date" class="form-label">End Date <span class="text-danger">*</span></label>
                                <input type="date" name="end_date" id="end_date" class="form-control" required>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="submit" class="btn btn-success">
                            <i class="fas fa-check-circle"></i> Submit
                        </button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                            <i class="fas fa-times"></i> Cancel
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Edit Season Modal -->
    <div class="modal fade" id="editSeasonModal" tabindex="-1" aria-labelledby="editSeasonModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <form action="{{ route('season.update', $season->id ?? 0) }}" method="POST" class="needs-validation"
                novalidate>
                @csrf
                @method('PUT')
                <div class="modal-content">
                    <div class="modal-header bg-warning text-white">
                        <h5 class="modal-title" id="editSeasonModalLabel">Edit Season</h5>
                        <button type="button" class="btn-close text-white" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                    </div>

                    <div class="modal-body">
                        <input type="hidden" id="edit_season_id" name="season_id" value="{{ $season->id ?? '' }}">

                        <div class="row g-3">
                            <div class="col-md-12">
                                <label for="edit_name" class="form-label">Season Name <span
                                        class="text-danger">*</span></label>
                                <input type="text" name="name" id="edit_name" class="form-control"
                                    value="{{ $season->name ?? '' }}" required>
                            </div>

                            <div class="col-md-6">
                                <label for="edit_start_date" class="form-label">Start Date <span
                                        class="text-danger">*</span></label>
                                <input type="date" name="start_date" id="edit_start_date" class="form-control"
                                    value="{{ $season->start_date ?? '' }}" required>
                            </div>

                            <div class="col-md-6">
                                <label for="edit_end_date" class="form-label">End Date <span
                                        class="text-danger">*</span></label>
                                <input type="date" name="end_date" id="edit_end_date" class="form-control"
                                    value="{{ $season->end_date ?? '' }}" required>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="submit" class="btn btn-success">
                            <i class="fas fa-check-circle"></i> Update
                        </button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                            <i class="fas fa-times"></i> Cancel
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>



@endsection

@section('scripts')
    <script>
        $(function() {
            $("#seasonTable").DataTable({
                "responsive": true,
                "lengthChange": false,
                "autoWidth": false,
                "buttons": ["copy", "csv", "excel", "pdf", "print"]
            }).buttons().container().appendTo('#seasonTable_wrapper .col-md-6:eq(0)');
        });
    </script>

    <script>
        $(document).ready(function() {
            // Open Edit Modal and fill values
            $('.edit-season').on('click', function() {
                const id = $(this).data('id');
                const name = $(this).data('name');
                const start_date = $(this).data('start_date');
                const end_date = $(this).data('end_date');

                $('#edit_season_id').val(id);
                $('#edit_name').val(name);
                $('#edit_start_date').val(start_date);
                $('#edit_end_date').val(end_date);

                $('#editSeasonModal').modal('show');
            });

            
        });
    </script>

@endsection