@extends('layouts.master')
@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">

        <div class="col-xxl">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h4 class="fw-bold mb-1" style="font-size: 1.8rem;">Promo</h4>
                    <p class="text-muted mb-0">People who manage City Public School</p>
                </div>
                @if($hasActivePromo)
                    <button class="btn btn-primary shadow-sm text-capitalize"
                            disabled
                            style="cursor: not-allowed;"
                            title="A promo is already active">
                        <i class="fa fa-plus me-1"></i> Add Promo
                    </button>
                {{--<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addAdminModal">--}}
                    {{--<i class="bx bx-user-plus me-2"></i> Add New Admin--}}
                {{--</button>--}}
                @else
                    <button class="btn btn-primary shadow-sm text-capitalize"
                            data-bs-toggle="modal"
                            data-bs-target="#openmodal">
                        <i class="fa fa-plus me-1"></i> Add Promo
                    </button>
                @endif
            </div>
            {{--<div class="card mb-4 shadow-sm border-0">--}}
                {{--<div class="card-header bg-white d-flex align-items-center justify-content-between">--}}
                    {{--<h5 class="mb-0 fw-bold text-primary text-capitalize">Promos</h5>--}}
                    {{--@if($hasActivePromo)--}}
                        {{--<button class="btn btn-primary btn-sm shadow-sm text-capitalize"--}}
                                {{--disabled--}}
                                {{--style="cursor: not-allowed;"--}}
                                {{--title="A promo is already active">--}}
                            {{--<i class="fa fa-plus me-1"></i> Add Promo--}}
                        {{--</button>--}}
                    {{--@else--}}
                        {{--<button class="btn btn-primary btn-sm shadow-sm text-capitalize"--}}
                                {{--data-bs-toggle="modal"--}}
                                {{--data-bs-target="#openmodal">--}}
                            {{--<i class="fa fa-plus me-1"></i> Add Promo--}}
                        {{--</button>--}}
                    {{--@endif--}}
                {{--</div>--}}
            {{--</div>--}}
            <div class="row">
                @foreach($promo as $promos)
                    @php
                        $today = \Carbon\Carbon::today();
                        $tillDate = \Carbon\Carbon::parse($promos->tilldate);
                        $status = '';
                        $badgeClass = '';

                        if ($promos->approved == 0) {
                            $status = 'Not Approved';
                            $badgeClass = 'bg-danger';
                        } elseif ($tillDate->lt($today)) {
                            $status = 'Expired';
                            $badgeClass = 'bg-secondary';
                        } else {
                            $status = 'Approved';
                            $badgeClass = 'bg-success';
                        }
                    @endphp

                    <div class="col-md-6 col-lg-4 mb-4 promo-wrapper">
                        <div class="card shadow-sm border-0 promo-card h-100">
                            <div class="card-img-top position-relative" style="height: 150px; overflow:hidden;">
                                <img src="{{ asset('assets/images/promos/' . $promos->banner) }}" alt="{{ $promos->name }}"
                                     class="w-100 h-100 object-fit-cover" style="border-top-left-radius: 10px; border-top-right-radius: 10px;">
                                <span class="badge {{ $badgeClass }} position-absolute" style="top: 10px; right: 10px;">
                                    {{ $status }}
                                </span>
                            </div>
                            <div class="card-body d-flex flex-column justify-content-between">
                                <h5 class="card-title font-weight-bold text-uppercase">{{ $promos->name }}</h5>
                                <p class="card-text text-muted mb-2 text-capitalize">{{ $promos->description }}</p>
                                <div class="d-flex justify-content-between align-items-center">
                                    <span class="text-primary font-weight-bold">{{ $promos->discount }}% Off</span>
                                    <small class="text-muted">Till: {{ \Carbon\Carbon::parse($promos->tilldate)->format('d M, Y') }}</small>
                                </div>
                                <div class="mt-2">
                                    {{--<a href="#" class="btn btn-sm btn-outline-primary mr-2">--}}
                                        {{--<i class="fa fa-edit"></i> Edit--}}
                                    {{--</a>--}}
                                    @if(auth()->user()->role==='owner' && $tillDate->gte($today))
                                    <a href="{{route('owner.promo.toggle', $promos->id)}}" class="btn btn-sm btn-outline-warning mr-2">
                                        <i class="fa fa-edit"></i> Approved
                                    </a>
                                    <a href="javascript:void(0);" class="btn btn-sm btn-outline-danger deletePromo" data-id="{{ $promos->id }}">
                                        <i class="fa fa-trash"></i> Delete
                                    </a>
                                    @else
                                        <a href="javascript:void(0);" class="btn btn-sm btn-outline-warning mr-2 opacity-75" style="cursor: not-allowed;">
                                            <i class="fa fa-edit"></i> Approved
                                        </a>
                                        <a href="javascript:void(0);" class="btn btn-sm btn-outline-danger opacity-75" style="cursor: not-allowed;">
                                            <i class="fa fa-trash"></i> Delete
                                        </a>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

        </div>
    </div>


    <!-- Modal -->
    <div class="modal fade" id="openmodal" data-bs-backdrop="static" tabindex="-1">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            @if(auth()->user()->role=="owner")
                <form class="modal-content" method="POST" enctype="multipart/form-data" action="{{ route('owner.addpromo') }}">
            @elseif(auth()->user()->role=="assistant")
                <form class="modal-content" method="POST" enctype="multipart/form-data" action="{{ route('assistant.addpromo') }}">
            @endif
                @csrf
                <div class="modal-header bg-primary">
                    <h5 class="modal-title text-white text-capitalize">Add Promo</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-3">
                        <!-- Name -->
                        <div class="col-md-6">
                            <label class="form-label">Name</label>
                            <input type="text" name="name" class="form-control" placeholder="Enter full name" required>
                        </div>
                        <!-- Email -->
                        <div class="col-md-6">
                            <label>Description</label>
                            <input type="text" class="form-control" name="description" placeholder="Enter Promo Description">
                        </div>
                        <!-- Password -->
                        <div class="col-md-6">
                            <label>Discount</label>
                            <input type="number" class="form-control" name="discount" placeholder="Enter Promo Discount" required>
                        </div>
                        <!-- Contact Number -->
                        <div class="col-md-6">
                            <label>Till Date</label>
                            <input type="date" class="form-control" name="tilldate" required>
                        </div>
                        <!-- City -->
                        <div class="col-md-12">
                            <label>Banner</label>
                            <input type="file" class="form-control" name="banner" required>
                        </div>
                    </div>
                </div>
                <div class="modal-footer bg-light">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                        Cancel
                    </button>
                    <button type="submit" class="btn btn-primary text-capitalize">
                        <i class="fa fa-save me-1"></i> Save
                    </button>
                </div>
            </form>
        </div>
    </div>
    <script>
        var deletePromoUrl = "{{ route('owner.promo.delete', ':id') }}";
        var CSRF_TOKEN = "{{ csrf_token() }}";
    </script>
@endsection