@extends('layouts.commonmaster')

@section('title') | Dashboard @endsection

@push('styles')

<style>
/* Calendar Date Card */
.date-card {
width: 80px; /* Adjust width for a square appearance */
border: 1px solid #ddd; /* Optional border */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
border-radius: 8px; /* Rounded corners */
background: #f9f9f9;
}

.date-month {
font-size: 1rem;
font-weight: bold;
color: #007bff;
}

.date-day {
font-size: 2rem;
font-weight: bold;
color: #333;
line-height: 1.2;
}

.date-year {
font-size: 0.8rem;
color: #666;
}

.date-label {
font-size: 0.75rem;
color: #888;
}

/* Circles for Matches */
.circle {
width: 20px;
height: 20px;
background-color: #007bff; /* Primary color */
border-radius: 50%;
display: inline-block;
}

.gap-2 {
gap: 10px; /* Space between circles */
}

/* Image */
.season-banner {
max-width: 100%; /* Ensures the image is responsive */
height: auto;
max-height: 300px; /* Optional: Limit the height */
}

/* Responsive Adjustments */
@media (max-width: 767.98px) {
.row.align-items-center.text-center.text-lg-start {
flex-direction: column; /* Stack content vertically */
}
.date-card {
margin-bottom: 1rem; /* Add spacing */
}
.season-banner {
margin-top: 1rem; /* Add spacing for better layout */
max-height: 200px; /* Smaller image for mobile */
}
}

/* Styling for the Navbar for this page */
.button-container {
display: flex;
justify-content: center; /* Center the content */
align-items: center; /* Align items vertically */
background-color: #f5f5f5; /* Light background for contrast */
overflow: hidden; /* Ensure content doesn't overflow the rounded corners */
width: fit-content;
margin: 10px auto; /* Center horizontally on the page */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for effect */
}

/* Remove list styles */
.button-container ul {
display: flex;
margin: 0;
padding: 0;
list-style: none;
width: 100%;
}

.button-container li {
flex: 1; /* Ensure equal widths */
text-align: center;
padding: 10px 20px;
background-color: #007bff; /* Button background color */
color: white; /* Text color */
font-size: 16px;
font-weight: bold;
cursor: pointer;
}

/* Remove the border on the last item */
.button-container li:last-child {
border-right: none;
}

/* Hover effect for buttons */
.button-container li:hover {
background-color: #0056b3; /* Darker blue on hover */
}

/* Active effect for buttons */
.button-container li:active {
background-color: #003f7f; /* Even darker blue on click */
}

</style>

@endpush

@section('content')

<!-- Page body -->
<div class="page-body">
    <div class="container-xl">

        @if($season_has_events)

        <div class="col-12">
            <div class="card card-md">
                <div class="card-body">
                    <div class="container my-4">
                        <!-- Start and End Date, Season Name, and Image -->
                        <div class="row align-items-center text-center text-lg-start">
                            <!-- Start Date -->
                            <div class="col-6 col-lg-2">
                                <div class="card text-center date-card mx-auto mx-lg-0">
                                    <div class="card-body p-2">
                                        <div class="date-month">{{ \Carbon\Carbon::parse($season->start_date)->format('M') }}</div>
                                        <div class="date-day">{{ \Carbon\Carbon::parse($season->start_date)->format('d') }}</div>
                                        <div class="date-year">{{ \Carbon\Carbon::parse($season->start_date)->format('Y') }}</div>
                                        <div class="date-label text-muted">Start Date</div>
                                    </div>
                                </div>
                            </div>
                            <!-- End Date -->
                            <div class="col-6 col-lg-2">
                                <div class="card text-center date-card mx-auto mx-lg-0">
                                    <div class="card-body p-2">
                                        <div class="date-month">{{ \Carbon\Carbon::parse($season->end_date)->format('M') }}</div>
                                        <div class="date-day">{{ \Carbon\Carbon::parse($season->end_date)->format('d') }}</div>
                                        <div class="date-year">{{ \Carbon\Carbon::parse($season->end_date)->format('Y') }}</div>
                                        <div class="date-label text-muted">End Date</div>
                                    </div>
                                </div>
                            </div>
                            <!-- Season Name -->
                            <div class="col-lg-4 mt-3 mt-lg-0">
                                <h1 class="h2">{{ $season->name }}</h1>
                            </div>
                            <!-- Season Image -->
                            <div class="col-lg-4 text-center mt-3 mt-lg-0">
                                <img src="{{ asset('storage/' . $season->season_banner_file) }}" alt="" class="img-fluid jarallax-img season-banner">
                            </div>
                        </div>

                        <!-- Text and Circles -->
                        <div class="row mt-4">
                            <!-- Text -->
                            <div class="col-12 text-center">
                                <span>
                                    The highly anticipated 2024-2025 Football Kenya Federation (FKF) National Super League promises to be a season of electrifying action
                                    and unforgettable moments.
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row row-deck row-cards mt-2">
            <div class="col-12">
                <div class="row row-cards">
                    <div class="col-sm-6 col-6 col-md-3 col-lg-3">
                        <a href="{{ route('season.show_season_event', ['id' => request()->route('id')]) }}" style="text-decoration: none;">
                            <div class="card card-sm" style="background-color: #C4EED0;">
                                <div class="card-body">
                                    <div class="row align-items-center">
                                        <div class="col-auto">
                                            <span class="bg-primary text-white avatar">
                                                <i class="ti ti-ticket"></i>
                                            </span>
                                        </div>
                                        <div class="col">
                                            <div class="font-weight-medium">
                                                <strong>View Season Events</strong>
                                            </div>
                                            <div class="text-secondary">

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>

                    <div class="col-sm-6 col-6 col-md-3 col-lg-3">
                        <div class="card card-sm">
                            <div class="card-body">
                                <div class="row align-items-center">
                                    <div class="col-auto">
                                        <span class="bg-green text-white avatar"><!-- Download SVG icon from http://tabler-icons.io/i/shopping-cart -->
                                            <i class="ti ti-table-shortcut"></i>
                                        </span>
                                    </div>
                                    <div class="col">
                                        <div class="font-weight-medium" id="updateSeasonStandings">
                                            <strong>Events Hosted</strong>
                                        </div>
                                        <div class="text-secondary">
                                            {{ count($season_games) }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-6 col-6 col-md-3 col-lg-3">
                        <a href="{{ route('season_membership.show', ['season_id' => $season_id]) }}" style="text-decoration: none;">
                            <div class="card card-sm" style="background-color: #A5DFF4;">
                                <div class="card-body">
                                    <div class="row align-items-center">
                                        <div class="col-auto">
                                            <span class="bg-warning text-white avatar"><!-- Download SVG icon from http://tabler-icons.io/i/brand-twitter -->
                                                <i class="ti ti-password-user"></i>
                                            </span>
                                        </div>
                                        <div class="col">
                                            <div class="font-weight-medium">
                                                <strong>Season Memberships</strong>
                                            </div>
                                            <div class="text-secondary">

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col-sm-6 col-6 col-md-3 col-lg-3">
                        <div class="card card-sm" id="addMembershipCard" style="cursor: pointer;">
                            <div class="card-body">
                                <div class="row align-items-center">
                                    <div class="col-auto">
                                        <span class="bg-facebook text-white avatar"><!-- Download SVG icon from http://tabler-icons.io/i/brand-facebook -->
                                            <i class="ti ti-hierarchy"></i>
                                        </span>
                                    </div>
                                    <div class="col">
                                        <div class="font-weight-medium">
                                            <strong>Memberships</strong>
                                        </div>
                                        <div class="text-secondary">
                                            <small></small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-body">
                        <span class="card-title"><strong>{{ $season->name }} Attendance</strong></span>
                        <!-- <canvas id="event_attendance"></canvas> -->
                        <div id="event_attendance"></div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-body">
                        <span class="card-title"><strong>{{ $season->name }} Generated Revenue</strong></span>
                        <div id="event_finance"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card" style="height: 28rem">
                    <div class="card-header">
                        <strong><span>Clerk Stats <small>(active this season)[in production]</small></span></strong>
                    </div>
                    <div class="card-body card-body-scrollable card-body-scrollable-shadow">
                        <div class="divide-y">
                            @forelse($active_clerks as $ac)
                            <div>
                                <a href="{{ route('clerk.show', ['id' => $ac->id]) }}" style="text-decoration: none;color: black;">
                                    <div class="row">
                                        <div class="col-auto">
                                            <span class="avatar">
                                                @php
                                                $words = explode(' ', $ac->name);
                                                $abbreviation = '';
                                                foreach ($words as $word) {
                                                $abbreviation .= strtoupper($word[0]); // Take the first letter of each word and convert to uppercase
                                                }
                                                echo $abbreviation;
                                                @endphp
                                            </span>
                                        </div>
                                        <div class="col">
                                            <div class="text-truncate">
                                                <strong>{{ $ac->name }}</strong>
                                            </div>
                                            <div class="text-secondary">{{ $ac->email }}</div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            @empty
                            <div>
                                <div class="row">

                                    <div class="col">
                                        <div class="text-truncate">
                                            <strong>No clerks have been activated yet</strong>
                                        </div>
                                        <div class="text-secondary">yesterday</div>
                                    </div>
                                </div>
                            </div>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-header border-0">
                        <div class="card-title">Season Game Stats</div>
                    </div>
                    <div class="card-table table-responsive" style="height: 24rem;">
                        <table class="table table-hover table-vcenter">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Match</th>
                                    <th>Attendance</th>
                                    <th>Revenue</th>
                                    <th>Date</th>
                                    <th>View Stats</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php $number = 1; @endphp
                                @forelse($season_games as $sg)
                                <tr>
                                    <td class="text-nowrap text-secondary">{{ $number }}.</td>
                                    <td class="w-1">
                                        <div style="display: flex; align-items: center; gap: 10px;">
                                            <span
                                                class="avatar avatar-sm"
                                                style="background-image: url('{{ asset('storage/' . $sg->team_a_logo) }}')"
                                                title="{{ $sg->team_a }}">
                                            </span>
                                            <span>vs</span>
                                            <span
                                                class="avatar avatar-sm"
                                                style="background-image: url('{{ asset('storage/' . $sg->team_b_logo) }}')"
                                                title="{{ $sg->team_b }}">
                                            </span>
                                        </div>
                                    </td>
                                    <td class="text-nowrap text-secondary">{{ $sg->attended_count }}<span style="color: #E81341;">({{$sg->not_attended_count}})</span></td>
                                    <td class="text-nowrap text-secondary"><strong>KSH {{ number_format($sg->revenue_generated, 2) }}</strong></td>
                                    <td class="text-nowrap text-secondary">{{ \Carbon\Carbon::parse($sg->start_date)->format('M jS') }}</td>
                                    <td class="text-center text-secondary"><a href="{{ route('event.show', ['id' => $sg->id]) }}" style="text-decoration: none;">View</a></td>
                                </tr>
                                @php $number++; @endphp
                                @empty

                                @endforelse

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        @else
        <div class="col-12">
            <div class="card card-md">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col">
                            <h2 class="h3">There are no upcoming matches for the season</h2>
                            <p class="m-0 text-secondary">
                                No Upcoming Matches Scheduled
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-xl d-flex flex-column justify-content-center">
            <div class="empty">
                <div class="empty-img"><img src="{{ asset('images/static/illustrations/void.svg') }}" height="128" alt="">
                </div>
                <p class="empty-title">No upcoming events found</p>
                <p class="empty-subtitle text-secondary">
                    Try creating an event to populate your dashboard
                </p>
                <div class="empty-action">
                    <a href="{{ route('event.create', ['id' => $season_id]) }}" class="btn btn-primary">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 5l0 14" /><path d="M5 12l14 0" /></svg>
                        Create Season
                    </a>
                </div>
            </div>
        </div>
        @endif
    </div>
</div>

<div class="modal fade" id="addSeasonMembership" data-bs-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg " role="document"  style="max-width: 50vw;margin-top: 120px">
        <div class="modal-content">

            <div class="modal-body">
                <div class="row">
                    <div class="col-4">
                        <!-- Left-side Tabs -->
                        <ul class="nav flex-column nav-pills" id="vehicleTab" role="tablist" aria-orientation="vertical">
                            <li class="nav-item" id="createMembershipListItem">
                                <a class="nav-link active" id="createMembershipSection-tab" data-bs-toggle="pill" href="#createMembershipSection" role="tab" aria-controls="createMembershipSection" aria-selected="true">Add Memberships</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link @if($season_memberships->isEmpty()) disabled @endif" id="viewSeasonMembershipSection-tab" data-bs-toggle="pill" href="#viewSeasonMembershipSection" role="tab" aria-controls="viewSeasonMembershipSection" aria-selected="false">Season Memberships</a>
                            </li>
                            <li class="nav-item">
                                <a class="disabled nav-link @if($season_memberships->isEmpty()) disabled @endif" id="editSeasonMembershipSection-tab" data-bs-toggle="pill" href="#editSeasonMembershipSection" role="tab" aria-controls="editSeasonMembershipSection" aria-selected="false">Edit Season Memberships</a>
                            </li>
                        </ul>
                    </div>

                    <div class="col-8">
                        <!-- Tab Content -->
                        <div class="tab-content" id="membershipTabContent">
                            <div class="tab-pane fade show active" id="createMembershipSection" role="tabpanel" aria-labelledby="createMembershipSection-tab">
                                <div class="d-flex">
                                    <h5 class="mb-0">ADD MEMBERSHIP</h5>
                                    <span class="ms-auto">
                                        <img src="{{ asset('images/static/plus.png') }}" width="27px" style="cursor: pointer;" id="addMembershipBtn">
                                    </span>
                                </div>
                                <form method="POST" action="" id="membershipForm">
                                    <div class="row" id="membershipFormDiv">
                                        <div class="col-md-5" id="">
                                            <div class="form-group">
                                                <label>Membership Tier #1</label>
                                                <input type="text" class="form-control" placeholder="Enter Membership Tier" name="membership-1">
                                                <div class="mt-2">
                                                    <label class="mb-0">Price</label>
                                                    <input name="membershipprice-1" type="number" class="form-control" placeholder="Enter Membership Tier" name="membership-1" style="max-width: 250px;">
                                                </div>

                                            </div>
                                        </div>
                                        <div class="col-md-7" id="">
                                            <span>Membership Description</span>
                                            <div class="form-group" id="membershipBenefitsDiv-1">
                                                <textarea name="membershipbenefit-1" class="form-control" data-bs-toggle="autosize" placeholder="Enter Membership Description" id="membershipbenefit-1"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="d-flex justify-content-end mt-2">
                                        <button type="button" class="btn btn-secondary me-2" id="resetMembershipForm" data-bs-dismiss="modal">Close</button>
                                        <button type="submit" id="submitMembershipBtn" class="btn btn-primary">Add Membership</button>
                                    </div>
                                </form>
                            </div>

                            <div class="tab-pane fade" id="viewSeasonMembershipSection" role="tabpanel" aria-labelledby="viewSeasonMembershipSection-tab">
                                <h5 class="mb-4">Season Memberships</h5>
                                <div class="row row-cols-1 row-cols-md-2 g-4">
                                    @foreach($season_memberships as $sm)
                                    <div class="col">
                                        <div class="card border-@if($loop->index == 0)primary @elseif($loop->index == 1)warning @elseif($loop->index == 2)danger @elseif($loop->index == 3)secondary @endif shadow-sm h-100">
                                            <div class="card-body">
                                                <h5 class="card-title"><strong>{{ $sm->name }}</strong></h5>
                                                <h3 class="card-subtitle mb-2 text-muted"><strong>Ksh. {{ $sm->price }}</strong></h3>
                                                <ul class="mb-0">
                                                    <li>{{ $sm->description }}</li>
                                                </ul>
                                            </div>
                                            <!-- <div class="d-flex"> -->
                                            <!--     <span class="ms-auto"> -->
                                            <!--         <img src="{{ asset('images/static/plus.png') }}" width="27px" style="cursor: pointer;" id="addMembershipBtn"> -->
                                            <!--     </span> -->
                                            <!-- </div> -->
                                        </div>
                                    </div>
                                    @endforeach
                                </div>

                                <div class="d-flex justify-content-end mt-2">
                                    <button type="button" class="btn btn-secondary me-2" id="resetMembershipForm" data-bs-dismiss="modal">Close</button>
                                </div>
                            </div>

                            <div class="tab-pane fade" id="editSeasonMembershipSection" role="tabpanel" aria-labelledby="editSeasonMembershipSection-tab">
                                <h5 class="mb-0">EDIT MEMBERSHIP</h5>
                                <form method="POST" action="">
                                    <div class="form-group">
                                        <form method="POST" action="" id="editMembershipForm">
                                            @csrf
                                            @php $count = 0 @endphp
                                            @foreach($season_memberships as $sm)
                                            @php $count++ @endphp
                                            <input type="hidden" name="membershipid[]" value="{{ $sm->id }}">
                                            <div class="row mt-2" id="membershipFormDiv">
                                                <div class="col-md-5" id="">
                                                    <div class="form-group">
                                                        <label>Membership Tier #{{ $count }}</label>
                                                        <input type="text" class="form-control" placeholder="Enter Membership Tier" name="membership-{{ $count }}" value="{{ $sm->name }}">
                                                        <div class="mt-2">
                                                            <label class="mb-0">Price</label>
                                                            <input name="membershipprice[]" type="number" class="form-control" placeholder="Enter Membership Tier" name="membership-{{ $count }}" style="max-width: 250px;" value="{{ $sm->price }}">
                                                        </div>

                                                    </div>
                                                </div>
                                                <div class="col-md-7" id="">
                                                    <span>Membership Description</span>
                                                    <div class="form-group" id="membershipBenefitsDiv-{{ $count }}">
                                                        <textarea name="membershipbenefit[]" class="form-control" data-bs-toggle="autosize" placeholder="Enter Membership Description" id="membershipbenefit-{{ $count }}">{{ $sm->description }}</textarea>
                                                    </div>
                                                </div>
                                            </div>
                                            <hr>
                                            @endforeach
                                            <div class="d-flex justify-content-end mt-2">
                                                <button type="submit" id="submitEditMembershipBtn" class="btn btn-primary">Add Membership</button>
                                            </div>
                                        </form>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- <div class="modal-footer"> -->
                <!--     <button type="button" class="btn btn-secondary" id="resetMembershipForm" data-bs-dismiss="modal">Close</button> -->
                <!--     <button type="button" class="btn btn-primary">Add Membership</button> -->
                <!-- </div> -->
            </div>
        </div>
    </div>

    @endsection

    @push('scripts')

    <script src="{{ asset('js/confettijs/confetti.min.js') }}" defer></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tsparticles-confetti/2.12.0/tsparticles.confetti.bundle.min.js" integrity="sha512-3LobCjM2nQ9WclTbZY+5+IqLKwUTlBaUJTmGWdsIr7M6T5F/l25oIBNeITuef+mbD8PBvmuCF9fwXVn+PCT23Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <script>
$(document).ready(function() {

    var event_id = JSON.parse("{{ json_encode($last_event_id) }}");
    var season_id = "{{ request()->route('id') }}";

    $.ajax({
        url: '/ticketier/get_season_line_attendance_chart_data/' + season_id,
        method: 'GET',
        success: function(response){
            window.ApexCharts && (new ApexCharts(document.getElementById('event_attendance'), {
                chart: {
                    type: "area",
                    fontFamily: 'inherit',
                    height: 240,
                    parentHeightOffset: 0,
                    toolbar: {
                        show: false,
                    },
                    animations: {
                        enabled: false
                    },
                },
                noData: {
                    text: "Loading...",
                    align: 'center',
                    verticalAlign: 'middle',
                    offsetX: 0,
                    offsetY: 0,
                    style: {
                        color: "#000000",
                        fontSize: '14px',
                        fontFamily: "Helvetica"
                    }
                },
                dataLabels: {
                    enabled: false,
                },
                fill: {
                    opacity: .16,
                    type: 'solid'
                },
                stroke: {
                    width: 2,
                    lineCap: "round",
                    curve: "smooth",
                },
                series: [{
                    name: "Attended",
                    data: response.attended_count
                },{
                        name: "Not Attended",
                        data: response.not_attended_count
                    }],
                tooltip: {
                    theme: 'dark'
                },
                grid: {
                    padding: {
                        top: -20,
                        right: 0,
                        left: -4,
                        bottom: -4
                    },
                    strokeDashArray: 4,
                },
                xaxis: {
                    labels: {
                        padding: 0,
                    },
                    tooltip: {
                        enabled: false
                    },
                    axisBorder: {
                        show: false,
                    },
                    type: 'text',
                },
                yaxis: {
                    labels: {
                        padding: 4
                    },
                },
                labels:  response.labels,
                colors: [tabler.getColor("primary"), tabler.getColor("red")],
                legend: {
                    show: true,
                },
            })).render();
        },
        error: function(error){

        }
    })

    $.ajax({
        url: '/ticketier/get_season_line_finance_chart_data/' + season_id,
        method: 'GET',
        success: function(response){
            console.log(response)
            window.ApexCharts && (new ApexCharts(document.getElementById('event_finance'), {
                chart: {
                    type: "area",
                    fontFamily: 'inherit',
                    height: 240,
                    parentHeightOffset: 0,
                    toolbar: {
                        show: false,
                    },
                    animations: {
                        enabled: false
                    },
                },
                noData: {
                    text: "Loading...",
                    align: 'center',
                    verticalAlign: 'middle',
                    offsetX: 0,
                    offsetY: 0,
                    style: {
                        color: "#000000",
                        fontSize: '14px',
                        fontFamily: "Helvetica"
                    }
                },
                dataLabels: {
                    enabled: false,
                },
                fill: {
                    opacity: .16,
                    type: 'solid'
                },
                stroke: {
                    width: 2,
                    lineCap: "round",
                    curve: "smooth",
                },
                series: [{
                    name: "Amount Earned",
                    data: response.revenue_data,
                }],
                tooltip: {
                    theme: 'dark'
                },
                grid: {
                    padding: {
                        top: -20,
                        right: 0,
                        left: -4,
                        bottom: -4
                    },
                    strokeDashArray: 4,
                },
                xaxis: {
                    labels: {
                        padding: 0,
                    },
                    tooltip: {
                        enabled: false
                    },
                    axisBorder: {
                        show: false,
                    },
                    type: 'text',
                },
                yaxis: {
                    labels: {
                        padding: 4
                    },
                },
                labels: response.labels,
                colors: [tabler.getColor("primary")],
                legend: {
                    show: true,
                },
            })).render();
        },
        error: function(error){

        }
    })

    $('#team_a_score, #team_b_score').on('keyup', function() {
        if($('#team_a_score').val() != '' && $('#team_b_score').val() != ''){
            $('#close_event_create_new_event_btn').removeAttr('disabled')
            console.log('true')
        }else{
            $('#close_event_create_new_event_btn').prop('disabled', true)
            console.log('false')
        }
    })

    $('body').on('click', '#close_event_create_new_event_btn', function(e) {
        e.preventDefault()
        $('#modal-footer').replaceWith(`<div class="modal-footer" id="modal-replaced-footer"><span id="confirm_close_replaced" class="me-auto" style="color: red;font-size: 16px;">Are you sure you want to proceed?</span><button type="button" class="btn btn-primary" id="close_replaced_modal">No</button><button type="button" class="btn btn-danger" id="close_event_create_new_event_btn_replaced">Yes</button></div>`)
    })

    $('body').on('click', '#close_event_create_new_event_btn_replaced', function() {

        $('#confirm_close_replaced').html('<img src="{{ asset('images/svg/loader.svg') }}" height="36" alt="">')

        $('#close_replaced_modal').prop('disabled', true)
        $('#close_event_create_new_event_btn_replaced').prop('disabled', true)

        var formData = $(this).serialize();

        var teamAScore = $('#team_a_score').val()
        var teamBScore = $('#team_b_score').val()
        var seasonId = season_id
        var eventHighlights = $('#event_highlights').val()
        var eventHighlightPic = $('#match_highlight_pic')[0].files[0]

        var formData = new FormData()
        formData.append('team_a_score', teamAScore)
        formData.append('team_b_score', teamBScore)
        formData.append('event_highlights', eventHighlights)
        formData.append('season_id', seasonId)
        if(eventHighlightPic){
            formData.append('highlight_pic', eventHighlightPic)
        }

        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            processData: false,
            contentType: false,
            cache: false,
            url: '/ticketier/event/stat/' + event_id,
            method: 'POST',
            data: formData,
            success: function(res) {
                console.log(res)
                setTimeout(function() {
                    $('#confirm_close_replaced').html('')
                    toastr.options = {
                        'progressBar' : true,
                        "showMethod": "fadeIn",
                        "positionClass": "toast-top-right",
                        "hideMethod": "fadeOut",
                        "closeButton": true,
                        "newestOnTop": false,
                    }
                    toastr.success('Event successfully closed. All event notes have been saved.');

                    const count = 200,
                    defaults = {
                        origin: { y: 0.7 },
                    };

                    function fire(particleRatio, opts) {
                        confetti(
                            Object.assign({}, defaults, opts, {
                                particleCount: Math.floor(count * particleRatio),
                            })
                        );
                    }

                    fire(0.25, {
                        spread: 26,
                        startVelocity: 55,
                    });

                    fire(0.2, {
                        spread: 60,
                    });

                    fire(0.35, {
                        spread: 100,
                        decay: 0.91,
                        scalar: 0.8,
                    });

                    fire(0.1, {
                        spread: 120,
                        startVelocity: 25,
                        decay: 0.92,
                        scalar: 1.2,
                    });

                    fire(0.1, {
                        spread: 120,
                        startVelocity: 45,
                    });

                    window.location = '/ticketier/event/create/' + season_id

                }, 100)
            },
            error: function(error) {
                console.log(error)
            }
        })
    })

    $('body').on('click', '#close_replaced_modal', function() {
        $('#modal-replaced-footer').replaceWith(`<div class="modal-footer" id="modal-footer"><span id="confirm_close" class="me-auto" style="color: red;font-size: 16px;"></span><button type="button" class="btn btn-primary" id="close_event_create_new_event_btn">Close Event</button></div>`)
    })

    $('body').on('click', '#close_modal_btn', function() {
        console.log('test')
        $("#close_event_form").trigger("reset");
        $('#modal-replaced-footer').replaceWith(`<div class="modal-footer" id="modal-footer"><span id="confirm_close" class="me-auto" style="color: red;font-size: 16px;"></span><button type="button" class="btn btn-primary" id="close_event_create_new_event_btn" disabled>Close Event</button></div>`)
    })

    $('#addMembershipCard').on('click', function() {
        $('#addSeasonMembership').modal('show')
    })

    m_count = 2

    $('#addMembershipBtn').on('click', function() {
        let htmlmembershipcontent = '<div class="row mt-2" id="membershipFormDiv"><div class="col-md-5" id=""> <div class="form-group"> <label>Membership Tier #'+ m_count +'</label> <input type="text" class="form-control" placeholder="Enter Membership Tier" name="membership-'+ m_count +'"><div class="mt-2"> <label class="mb-0">Price</label> <input name="membershipprice-'+ m_count +'" type="number" class="form-control" placeholder="Enter Membership Tier" name="membership-1" style="max-width: 250px;"> </div> </div> </div> <div class="col-md-7" id=""> <span>Membership Description</span> <div class="form-group" id="membershipBenefitsDiv-'+ m_count +'"> <textarea name="membershipbenefit-'+ m_count +'" class="form-control" data-bs-toggle="autosize" placeholder="Enter Membership Description" id="membershipbenefit-'+ m_count +'"></textarea> </div></div></div>'
        $('#membershipFormDiv').append(htmlmembershipcontent)
        m_count++
    })

    function resetMembershipForm(){
        let htmlcontentreset = '<form method="POST" action="" id="membershipForm"> <div class="row" id="membershipFormDiv"> <div class="col-md-5" id=""> <div class="form-group"> <label>Membership Tier #1</label> <input type="text" class="form-control" placeholder="Enter Membership Tier" name="membership-1"> <div class="mt-2"> <label class="mb-0">Price</label> <input name="membershipprice-1" type="number" class="form-control" placeholder="Enter Membership Tier" name="membership-1" style="max-width: 250px;"> </div> </div> </div> <div class="col-md-7" id=""> <span>Membership Description</span> <div class="form-group" id="membershipBenefitsDiv-1"> <textarea name="membershipbenefit-1" class="form-control" data-bs-toggle="autosize" placeholder="Enter Membership Description" id="membershipbenefit-1"></textarea> </div> </div> </div> <div class="d-flex justify-content-end mt-2"> <button type="button" class="btn btn-secondary me-2" id="resetMembershipForm" data-bs-dismiss="modal">Close</button> <button type="submit" id="submitMembershipBtn" class="btn btn-primary">Add Membership</button> </div> </form>'
        $('#membershipForm').replaceWith(htmlcontentreset)
    }

    $('#resetMembershipForm').on('click', function() {
        resetMembershipForm()
    })

    $('#createMembershipListItem').on('click', function(){
        resetMembershipForm()
    })

    $('body').on('click', '#submitMembershipBtn', function(e){
        e.preventDefault()

        formdata = $('#membershipForm').serializeArray()

        $(this).html("<span>Loading...</span>")

        let memberships = {}

        formdata.forEach(field => {
            let membership = field.name.match(/^membership-(\d+)$/)

            if(membership){
                let index = membership[1]
                let membershipName = field.value

                let membershipBenefit = formdata.find(f => f.name === 'membershipbenefit-' + index)
                let membershipprice = formdata.find(f => f.name === 'membershipprice-' + index)

                let membershipDesc = membershipBenefit ? membershipBenefit.value : null
                let membershipPrice = membershipprice ? membershipprice.value : null

                if(membershipName && membershipDesc, membershipPrice){
                    if(!memberships[membershipName]) memberships[membershipName] = []
                    memberships[membershipName].push(membershipDesc)
                    memberships[membershipName].push(membershipPrice)
                }
            }
        })

        $.ajax({
            method: 'POST',
            url: '/ticketier/add_season_membership/' + season_id,
            data: {
                data: JSON.stringify(memberships),
                _token: $('meta[name="csrf-token"]').attr('content')
            },
            success: function(res){
                toastr.options = {
                    'progressBar' : true,
                    "showMethod": "fadeIn",
                    "positionClass": "toast-top-right",
                    "hideMethod": "fadeOut",
                    "closeButton": true,
                    "newestOnTop": false,
                }
                toastr.success('The Season Memberships have been created successfully');

                location.reload()

            },
            error: function(error){
                toastr.options = {
                    'progressBar' : true,
                    "showMethod": "fadeIn",
                    "positionClass": "toast-top-right",
                    "hideMethod": "fadeOut",
                    "closeButton": true,
                    "newestOnTop": false,
                }
                toastr.error('An error occurred. Please try again');
            },
        })
    })

    // $('#addSeasonMembership').modal('show')
});

    </script>

    @endpush