@php
    $maboutique=\Illuminate\Support\Facades\Session::get('boutique');
@endphp
@extends("../dashboard._blank")

@section("sidebar")
    @include("../dashboard._sidebar")
@endsection
@section("content")
    <style>
        /* Modern Code Promo Page - Sharp Edges Design */
        :root {
            --promo-primary: #6d8f1a;
            --promo-primary-dark: #5a7515;
            --promo-primary-light: #88b121;
            --promo-danger: #dc2626;
            --promo-warning: #f59e0b;
            --promo-info: #3b82f6;
            --promo-success: #10b981;
            --promo-text: #1f2937;
            --promo-text-muted: #6b7280;
            --promo-border: #e5e7eb;
            --promo-bg: #ffffff;
            --promo-bg-gray: #f9fafb;
        }

        .btn { border-radius: 0px; }
        .form-control { font-weight: 600; }
        select { font-weight: 600; }

        .promo-page-header {
            background: var(--promo-bg);
            border-bottom: 1px solid var(--promo-border);
            padding: 24px 0;
            margin-bottom: 24px;
        }

        .promo-page-title {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 24px;
            font-weight: 700;
            color: var(--promo-text);
            margin: 0;
        }

        .promo-btn {
            padding: 8px 16px;
            font-weight: 600;
            font-size: 9pt;
            border: 1px solid transparent;
            transition: all 0.3s ease;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            text-decoration: none;
            margin-right: 8px;
        }

        .promo-btn-primary {
            background: var(--promo-primary);
            color: #ffffff;
            border-color: var(--promo-primary);
        }

        .promo-btn-primary:hover {
            background: var(--promo-primary-dark);
            color: #ffffff;
        }

        .promo-btn-default {
            background: #ffffff;
            color: var(--promo-text);
            border-color: var(--promo-border);
        }

        .promo-btn-default:hover {
            background: var(--promo-bg-gray);
            color: var(--promo-text);
        }

        .promo-table-container {
            background: var(--promo-bg);
            border: 1px solid var(--promo-border);
            overflow-x: auto;
        }

        .promo-table {
            width: 100%;
            border-collapse: collapse;
        }

        .promo-table thead {
            background: var(--promo-bg-gray);
        }

        .promo-table thead th {
            padding: 16px;
            text-align: left;
            font-weight: 700;
            font-size: 9pt;
            color: var(--promo-text);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            border-bottom: 2px solid var(--promo-border);
            white-space: nowrap;
        }

        .promo-table tbody td {
            padding: 12px 16px;
            text-align: left;
            font-size: 9pt;
            color: var(--promo-text);
            border-bottom: 1px solid var(--promo-border);
        }

        .promo-table tbody tr {
            transition: background 0.2s ease;
        }

        .promo-table tbody tr:hover {
            background: var(--promo-bg-gray);
        }

        .promo-code-badge {
            display: inline-block;
            padding: 6px 12px;
            font-size: 9pt;
            font-weight: 700;
            background: var(--promo-primary);
            color: #ffffff;
            font-family: monospace;
            letter-spacing: 1px;
        }

        .promo-discount-badge {
            display: inline-block;
            padding: 4px 8px;
            font-size: 9pt;
            font-weight: 600;
            background: var(--promo-success);
            color: #ffffff;
        }

        /* Fixed Action Dropdown - Works in narrow tables */
        .promo-action-dropdown {
            position: relative;
            display: inline-block;
        }

        .promo-action-btn {
            padding: 6px 12px;
            background: var(--promo-bg-gray);
            color: var(--promo-text);
            border: 1px solid var(--promo-border);
            font-size: 9pt;
            font-weight: 600;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: all 0.3s ease;
            white-space: nowrap;
        }

        .promo-action-btn:hover {
            background: var(--promo-primary);
            border-color: var(--promo-primary);
            color: #ffffff;
        }

        .promo-action-menu {
            position: absolute;
            top: 100%;
            left: 0; /* Changed from right: 0 to left: 0 to prevent overflow */
            background: var(--promo-bg);
            border: 1px solid var(--promo-border);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            min-width: 160px;
            z-index: 1000;
            display: none;
            margin-top: 4px;
        }

        /* Show menu on hover */
        .promo-action-dropdown:hover .promo-action-menu {
            display: block;
        }

        .promo-action-menu-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 16px;
            font-size: 9pt;
            color: var(--promo-text);
            text-decoration: none;
            transition: background 0.2s ease;
            border-bottom: 1px solid var(--promo-border);
            white-space: nowrap;
        }

        .promo-action-menu-item:last-child {
            border-bottom: none;
        }

        .promo-action-menu-item:hover {
            background: var(--promo-bg-gray);
        }

        .promo-action-menu-item.edit:hover {
            background: rgba(245, 158, 11, 0.1);
            color: var(--promo-warning);
        }

        .promo-action-menu-item.delete:hover {
            background: rgba(220, 38, 38, 0.1);
            color: var(--promo-danger);
        }

        /* Alert Styles */
        .promo-alert {
            padding: 12px 16px;
            margin-bottom: 16px;
            border: 1px solid transparent;
        }

        .promo-alert-success {
            background: rgba(16, 185, 129, 0.1);
            border-color: var(--promo-success);
            color: var(--promo-success);
        }

        .promo-alert-danger {
            background: rgba(220, 38, 38, 0.1);
            border-color: var(--promo-danger);
            color: var(--promo-danger);
        }

        .promo-alert ul {
            margin: 0;
            padding-left: 20px;
        }
    </style>
    <!-- page content -->
    <div class="right_col" role="main">
        <div>
            <div class="clearfix"></div>
            <div class="container">
                <div class="promo-page-header">
                    <div class="row">
                        <div class="col-xs-12 col-md-6">
                            <h1 class="promo-page-title">
                                <i class="fa fa-ticket-alt"></i>
                                <span>Codes Promo</span>
                            </h1>
                        </div>
                        <div class="col-xs-12 col-md-6 text-right" style="padding-top: 8px;">
                            <a href="{{route('gerer_boutique',$maboutique['slug'])}}" class="promo-btn promo-btn-default">
                                <i class="fa fa-long-arrow-alt-left"></i>
                                <span>Retour</span>
                            </a>
                            <button data-toggle="modal" data-target="#createCodePromoModal" class="promo-btn promo-btn-primary">
                                <i class="fa fa-plus"></i>
                                <span>Ajouter un code promo</span>
                            </button>
                        </div>
                    </div>
                </div>

                @if ($errors->any())
                    <div class="promo-alert promo-alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                @if(session("success"))
                    <div class="promo-alert promo-alert-success">
                        {{session('success')}}
                    </div>
                @elseif(session("error"))
                    <div class="promo-alert promo-alert-danger">
                        {{session('error')}}
                    </div>
                @endif

                <!-- form -->
                <div class="row">
                    <div class="col-sm-12 col-xs-12 col-lg-12">
                        <div class="promo-table-container">
                            <table class="promo-table" id="codePromodatatable-buttons">
                                <thead>
                                <tr>
                                    <th style="width: 100px;">Actions</th>
                                    <th>Code</th>
                                    <th>Réduction</th>
                                    <th>Montant minimum</th>
                                    <th>Max utilisateurs</th>
                                    <th>Date valide</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($codePromos as $codePromo)
                                    <tr>
                                        <td>
                                            <div class="promo-action-dropdown">
                                                <button class="promo-action-btn">
                                                    <span>Actions</span>
                                                    <i class="fa fa-chevron-down"></i>
                                                </button>
                                                <div class="promo-action-menu">
                                                    <a href="{{route('get.code_promo',$codePromo->id)}}" class="promo-action-menu-item edit updateCodePromo">
                                                        <i class="fa fa-edit"></i>
                                                        <span>Modifier</span>
                                                    </a>
                                                    <a href="{{route('delete.code_promo',$codePromo->id)}}" class="promo-action-menu-item delete">
                                                        <i class="fa fa-trash"></i>
                                                        <span>Supprimer</span>
                                                    </a>
                                                </div>
                                            </div>
                                        </td>
                                        <td><span class="promo-code-badge">{{ $codePromo->code }}</span></td>
                                        <td><span class="promo-discount-badge">{{ $codePromo->reduction }}%</span></td>
                                        <td>{{ $codePromo->min_amount ? number_format($codePromo->min_amount) . ' XOF' : '-' }}</td>
                                        <td>{{ $codePromo->max_user ?? 'Illimité' }}</td>
                                        <td>{{ $codePromo->validate_date ?? 'Pas de limite' }}</td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="createCodePromoModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content" style="border-radius: 0px;">
                <div class="modal-header" style="background: var(--promo-primary);">
                    <button type="button" class="close" data-dismiss="modal" style="color: #ffffff;">&times;</button>
                    <h4 class="modal-title" style="color: #ffffff;"><i class="fa fa-ticket-alt"></i> <span id="titleTexte">Code Promo</span></h4>
                </div>
                <div class="modal-body col-lg-12">
                    <div class="col-lg-12">
                        <form action="{{route('admin.boutique.create.code_promo')}}" id="createForms" method="post" class="row">
                            @csrf

                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="code">Code Promo <a href="#" style="color: var(--promo-primary);">générer</a></label>
                                    <input type="text" required class="form-control" name="code" id="code" placeholder="CodePromo">
                                </div>
                            </div>

                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="reduction">% de réduction</label>
                                    <input type="number" required class="form-control" max="100" min="1" maxlength="3" minlength="1" name="reduction" id="reduction" placeholder="Ex: 10">
                                </div>
                            </div>

                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label for="min_amount">Montant minimum de commande (Optionnel)</label>
                                    <input type="number" class="form-control" name="min_amount" id="min_amount" placeholder="Laissez vide pour aucune limite">
                                </div>
                            </div>

                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label for="max_user">Nombre maximum d'utilisateurs (Optionnel)</label>
                                    <input type="number" class="form-control" name="max_user" id="max_user" placeholder="Laissez vide pour illimité">
                                </div>
                            </div>

                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label for="validate_date">Date de validité (Optionnel)</label>
                                    <input type="datetime-local" class="form-control" name="validate_date" id="validate_date">
                                </div>
                            </div>

                            <input type="hidden" name="code_promo_id" id="code_promo_id">

                            <div class="col-lg-12 text-right">
                                <button type="button" class="btn btn-default btn-sm close_categorie_mib" data-dismiss="modal">Fermer</button>
                                <button type="submit" class="promo-btn promo-btn-primary">Valider</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- /page content -->
@endsection