@extends('layouts.app')
@section('content')

<div class="container">

    @if(session('success'))
    <div class="position-fixed top-0 end-0 p-3" style="z-index: 1050;">
        <div class="toast show align-items-center text-bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true" autohide="false">
            <div class="d-flex">
                <div class="toast-body">
                    {{ session('success') }}
                </div>
                <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
        </div>
    </div>
    <script>
        setTimeout(function() {
            location.reload();
        }, 500);
    </script>
    @endif

    <h1 class="mb-3">Organizations</h1>
    <div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalToggleLabel">Add New Organizations Name</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form action="{{ route('organizations.store') }}" method="POST">
                        @csrf
                        <label class="form-label ps-1">Enter Organizations Name:</label>
                        <input type="text" name="organization_name" class="form-control" placeholder="Enter something">
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-info text-white" style="background: #00ACCD;">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="d-flex justify-content-between align-items-center gap-5">
        <a class="mb-3 circle-btn ml-5" data-bs-toggle="modal" href="#exampleModalToggle" style="background: #00ACCD;" role="button">+</a>
        <div class="search-bar w-25 d-flex mb-3">
            <form action="{{ route('organizations.search') }}" method="GET" class="d-flex w-100">
                <input type="text" class="form-control border-0" name="organization_name" value="{{ $organization_name ?? '' }}" placeholder="Filter by name">
                <button type="submit" class="btn btn-info ms-2 text-white" style="background: #00ACCD;">Search</button>
            </form>
        </div>
    </div>

    <div class="dashboard-container">
        @foreach ($organizations as $key => $org)
        <div class="accordion" id="accordionExample">
            <div class="accordion-item mb-3 rounded-2">
                <h2 class="accordion-header " id="headingOne">
                    <button class="accordion-button bg-white" type="button" data-bs-toggle="collapse" data-bs-target="#collapse" aria-expanded="true" aria-controls="collapseone">
                        <img src="{{ asset($org->details->organization_logo ?? 'https://www.shutterstock.com/image-vector/404-error-icon-vector-symbol-260nw-1545236357.jpg') }}" class="rounded me-3" style="width: 3rem;">
                        {{ $org->organization_name }}
                    </button>
                </h2>

                <div id="collapse" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        <!-- <div id="details-section"> -->
                        <div class="d-flex justify-content-between containerr">
                            <div class="search-bar ms-2" style="width: 48%;">
                                <input type="text" class="form-control border-0" placeholder="Search Subscribers">
                            </div>
                            <div class="d-flex gap-2">
                                <!-- search button code -->
                                <button class="icon-btn"><i class="bi bi-search" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip on bottom"></i></button>
                                <!-- edit organization button code -->
                                <form action="{{ url('/general/details') }}" method="GET">
                                    <input type="hidden" name="id" value="{{$org->id}}">
                                    <button class="icon-btn" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip on bottom">
                                        <i class="bi bi-plus"></i>
                                    </button>
                                </form>
                                <!-- add Subscribers -->
                                <form action="" method="GET">
                                    <input type="hidden" name="id" value="{{ $org->id }}">
                                    <button class="icon-btn">
                                        <i class="bi bi-people"></i>
                                    </button>
                                </form>
                                <!-- search Subscribers -->
                                <form action="" method="GET">
                                    <input type="hidden" name="id" value="{{ $org->id }}">
                                    <button class="icon-btn">
                                        <i class="bi bi-pencil-square"></i>
                                    </button>
                                </form>
                                <!-- content seat -->
                                <form action="{{ url('/contentset') }}" method="GET">
                                    <input type="hidden" name="id" value="{{ $org->id }}">
                                    <button class="icon-btn">
                                        <i class="bi bi-film"></i>
                                    </button>
                                </form>
                                <!-- MONETIZATION -->
                                <form action="{{ url('/monetization/paln') }}" method="GET">
                                    <input type="hidden" name="id" value="{{ $org->id }}">
                                    <button class="icon-btn">
                                        <i class="bi bi-briefcase"></i>
                                    </button>
                                </form>
                                <!-- ANNOUNCEMENTS -->
                                <form action="{{ url('/announcment') }}" method="GET">
                                    <input type="hidden" name="id" value="{{ $org->id }}">
                                    <button class="icon-btn">
                                        <i class="bi bi-megaphone"></i>
                                    </button>
                                </form>
                                <!-- edit appilication -->
                                <form action="{{ url('/app/customization') }}" method="GET">
                                    <input type="hidden" name="id" value="{{ $org->id }}">
                                    <button class="icon-btn">
                                        <i class="bi bi-phone"></i>
                                    </button>
                                </form>
                                <!-- payment button -->
                                <form action="{{ url('/monetization/paln') }}" method="GET">
                                    <input type="hidden" name="id" value="{{ $org->id }}">
                                    <button class="icon-btn">
                                        <i class="bi bi-credit-card"></i>
                                    </button>
                                </form>
                                <!-- shopping cart -->
                                <form action="{{ url('shoppingcart') }}" method="GET">
                                    <input type="hidden" name="id" value="{{ $org->id }}">
                                    <button class="icon-btn">
                                        <i class="bi bi-cart"></i>
                                    </button>
                                </form>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="row">
                                    <div class="col-lg-3 col-md-6 text-center">
                                        <form action="" method="get">
                                            <input type="hidden" name="id" value="{{ $org->id }}">
                                            <button class="grid-item m-2" style="cursor: pointer;">
                                                <i class="bi bi-person-plus"></i>
                                                <p>ADD SUBSCRIBER</p>
                                            </button>
                                        </form>
                                    </div>

                                    <div class="col-lg-3 col-md-6 text-center">
                                        <form action="{{ url('viewsubscriber') }}" method="get">
                                            <input type="hidden" name="id" value="{{ $org->id }}">
                                            <button class="grid-item m-2" style="cursor: pointer;">
                                                <i class="bi bi-people"></i>
                                                <p>VIEW SUBSCRIBERS</p>
                                            </button>
                                        </form>
                                    </div>

                                    <div class="col-lg-3 col-md-6 text-center">
                                        <form action="{{ url('/contentset') }}" method="get">
                                            <input type="hidden" name="id" value="{{ $org->id }}">
                                            <button class="grid-item m-2" style="cursor: pointer;">
                                                <i class="bi bi-film"></i>
                                                <p>CONTENT SETS</p>
                                            </button>
                                        </form>
                                    </div>

                                    <div class="col-lg-3 col-md-6 text-center">
                                        <form action="{{ url('/monetization/paln') }}" method="get">
                                            <input type="hidden" name="id" value="{{ $org->id }}">
                                            <button class="grid-item m-2" style="cursor: pointer;">
                                                <i class="bi bi-bag"></i>
                                                <p>MONETIZATION PLANS</p>
                                            </button>
                                        </form>
                                    </div>

                                    <div class="col-lg-3 col-md-6 text-center">
                                        <form action="{{ url('/announcment') }}" method="get">
                                            <input type="hidden" name="id" value="{{ $org->id }}">
                                            <button class="grid-item m-2" style="cursor: pointer;">
                                                <i class="bi bi-megaphone"></i>
                                                <p>ANNOUNCEMENTS</p>
                                            </button>
                                        </form>
                                    </div>

                                    <div class="col-lg-3 col-md-6 text-center">
                                        <form action="{{ url('/app/customization') }}" method="get">
                                            <input type="hidden" name="id" value="{{ $org->id }}">
                                            <button class="grid-item m-2" style="cursor: pointer;">
                                                <i class="bi bi-phone"></i>
                                                <p>APPS CUSTOMIZATION</p>
                                            </button>
                                        </form>
                                    </div>

                                    <div class="col-lg-3 col-md-6 text-center">
                                        <form action="{{ url('/monetization/paln') }}" method="get">
                                            <input type="hidden" name="id" value="{{ $org->id }}">
                                            <button class="grid-item m-2" style="cursor: pointer;">
                                                <i class="bi bi-credit-card"></i>
                                                <p>PAYMENT SERVICES</p>
                                            </button>
                                        </form>
                                    </div>

                                    <div class="col-lg-3 col-md- text-center6">
                                        <form action="{{ url('shoppingcart') }}" method="get">
                                            <input type="hidden" name="id" value="{{ $org->id }}">
                                            <button class="grid-item m-2" style="cursor: pointer;">
                                                <i class="bi bi-cart"></i>
                                                <p>SHOPPING CART</p>
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="d-flex flex-wrap justify-content-between border-bottom border-muted my-3 pb-2">
                                            <h5>Active Subscribers:</h5>
                                            <h5>{{ $counts - $expiredSubscribers }}</h5>
                                        </div>
                                        <div class="d-flex flex-wrap justify-content-between border-bottom border-muted my-3 pb-2">
                                            <h5>Expired Subscribers:</h5>
                                            <h5>{{ $expiredSubscribers }}</h5>
                                        </div>
                                        <div class="d-flex flex-wrap justify-content-between border-bottom border-muted my-3 pb-2">
                                            <h5>Active Devices:</h5>
                                            <h5>1</h5>
                                        </div>
                                        <div class="d-flex flex-wrap justify-content-between border-bottom border-muted my-3 pb-2">
                                            <h5>Inactive Devices:</h5>
                                            <h5>0</h5>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="d-flex flex-wrap justify-content-between border-bottom border-muted my-3 pb-2">
                                            <h5>Channels</h5>
                                            <h5><strong>UP:</strong> 0 <strong>DOWN:</strong> 1 </h5>
                                        </div>
                                        <div class="d-flex flex-wrap justify-content-between border-bottom border-muted my-3 pb-2">
                                            <h5>Video on Demand:</h5>
                                            <h5><strong>UP:</strong> 0 <strong>DOWN:</strong> 1 </h5>
                                        </div>
                                        <div class="d-flex flex-wrap justify-content-between border-bottom border-muted my-3 pb-2">
                                            <h5>Catch-up Channels:</h5>
                                            <h5><strong>Recording:</strong> - <strong></h5>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- </div> -->
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    </div>
</div>
@include('layouts.scripts')
@endsection

<!-- justify-content-center container-->