@extends('template')

@section('content')
    <div class="h-screen pt-5 ">
        <div class="py-5 "style="background-color:#333;margin-top:53px;">
            <div class="container ">
                <h1 class="text-white text-center fw-bold hidden">CABOR BINAAN</h1>
            </div>

        </div>
        <div class="container">
            <div class="text-center my-5">

                <h1 class="text-center fw-bold p-4" style="border-bottom: 5px solid #ff0000;display: inline-block;">PRIORITAS
                </h1>
            </div>
            <div class="row py-5">
                @foreach ($cabor_prioritas as $item)
                    <div class="col-3 my-3  ">
                        <a class="card bigger border-0" style="border-radius: 20px; " data-bs-toggle="modal"
                            data-bs-target="#club-modal"
                            data-clubs=" @if (isset($item->club)) {{ json_encode($item->club) }} @endif">
                            <div class="card-header p-0 m-0 border-0 text-center py-2"
                                style="border-radius: 20px 20px 0 0;height:150px;">
                                <img src="{{ asset('images/logocabor') . '/' . $item->photo }}"
                                    alt="Responsive image"style="width: auto;object-fit:cover; height: 100%;border-radius: 20px 20px 0 0;">
                            </div>
                            <div class="card-footer m-0 border-0"
                                style="background-color: #333; border-radius: 0 0 20px 20px;">
                                <h4 class="fw-bold text-white text-center text-uppercase">{{ $item->nama }}</h4>
                            </div>
                        </a>
                    </div>
                @endforeach
            </div>
            <div class="text-center my-5">

                <h1 class="text-center fw-bold p-4" style="border-bottom: 5px solid #ff0000;display: inline-block;">
                    UNGGULAN
                </h1>
            </div>
            <div class="row py-5 mb-5">
                @foreach ($cabor_unggulan as $item)
                    <div class="col-3">
                        <a class="card bigger border-0" style="border-radius: 20px; " data-bs-toggle="modal"
                            data-bs-target="#club-modal"
                            data-clubs=" @if (isset($item->club)) {{ json_encode($item->club) }} @endif">
                            <div class="card-header p-0 m-0 border-0 text-center py-2"
                                style="border-radius: 20px 20px 0 0; height:150px;">
                                <img src="{{ asset('images/logocabor') . '/' . $item->photo }}"
                                    alt="Responsive image"style="width: auto;object-fit:cover; height: 100%;border-radius: 20px 20px 0 0;">
                            </div>
                            <div class="card-footer m-0 border-0"
                                style="background-color: #333; border-radius: 0 0 20px 20px;">
                                <h4 class="fw-bold text-white text-center text-uppercase">{{ $item->nama }}</h4>
                            </div>
                        </a>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    {{-- modal --}}
    <div class="modal fade" id="club-modal">
        <div class="modal-dialog modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header bg-dark text-white">
                    <h3 class="modal-title" id="exampleModalLabel">CLUB OLAHRAGA</h3>
                    <button type="button" class="close text-white" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div id="club-list">
                    </div>
                </div>
            </div>
        </div>
    </div>



    {{-- modal end --}}
    @push('modal-stuff')
        <script>
            $(document).ready(function() {
                $('#club-modal').on('show.bs.modal', function(event) {
                    var button = $(event.relatedTarget);
                    var clubs = JSON.parse(button.data('clubs'));

                    var modal = $(this);
                    var clubList = modal.find('#club-list');
                    clubHtml = '';
                    clubList.empty();
                    if (clubs < 1) {
                        clubHtml = `
    <div class="club-item bigger mb-3 d-flex align-items-start p-3 "style="border: 2px solid #ccc; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);">
        <div>
        <h3 class="fw-bold text-center">Maaf, Club Belum Tersedia!</h3>
    </div>

    </div>
    `;
                    } else {
                        clubs.forEach(function(club) {
                            clubHtml += `
    <div class="club-item mb-3 bigger d-flex align-items-start p-3 "style="border: 2px solid #ccc; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);">
        <div class="me-3">
            <img src="/images/club/${club.photo}" alt="${club.nama}" style="height: 200px; width:200px; object-fit:cover; border-radius: 10px;">
        </div>
        <div>
            <h5 class="fw-bold">${club.nama}</h5>
            <p>Alamat: ${club.alamat}</p>
            <p>Kontak: ${club.no_telp}</p>
            <p>Email: ${club.email}</p>
        </div>
    </div>
    `;
                        });
                    }

                    clubList.append(clubHtml);
                });
            });
        </script>
    @endpush
@endsection