@extends('backoffice.layouts.app')

@push('styles')
<style>
    .glass-card {
        background: rgba(30,41,59,.72);
        backdrop-filter: blur(10px);
    }

    .card-header-custom {
        border-bottom: 1px solid rgba(148,163,184,.08);
        background: transparent;
    }

    .edit-highlight {
        border: 1px solid rgba(245,158,11,.18) !important;
        box-shadow: 0 12px 30px rgba(245,158,11,.08);
    }

    .add-highlight {
        border: 1px solid rgba(34,197,94,.16) !important;
        box-shadow: 0 12px 30px rgba(34,197,94,.08);
    }
</style>
@endpush

@section('content')
<div class="container-xxl container-p-y">

    {{-- HEADER --}}
    <div class="card border-0 shadow-sm overflow-hidden position-relative mb-4 glass-card">

        <div class="position-absolute top-0 end-0"
             style="
                width:220px;
                height:220px;
                background:
                radial-gradient(circle,
                rgba(99,102,241,.14) 0%,
                transparent 72%);
                pointer-events:none;">
        </div>

        <div class="card-body position-relative z-1 d-flex justify-content-between align-items-center flex-wrap gap-2">

            <div>

                <h5 class="mb-1 text-white fw-semibold">
                    Bonus Setting
                </h5>

                <small class="text-body-secondary">
                    Kelola data bonus website
                </small>

            </div>

            <button type="button"
                    class="btn btn-success"
                    id="btnToggleAddBonus">

                <i class="ti tabler-plus me-1"></i>
                Tambah Bonus

            </button>

        </div>

    </div>

    {{-- ADD BONUS --}}
    <div class="card border-0 shadow-sm mb-4 d-none glass-card add-highlight"
         id="addBonusCard">

        <div class="card-header card-header-custom">

            <h6 class="mb-1 text-white fw-semibold">
                Tambah Bonus
            </h6>

            <small class="text-body-secondary">
                Tambahkan bonus baru
            </small>

        </div>

        <div class="card-body">

            <form method="POST"
                  action="{{ route('admin.promo.bonus.store') }}">

                @csrf

                <div class="row g-3">

                    <div class="col-md-4">

                        <label class="form-label">
                            Title
                        </label>

                        <input name="title"
                               class="form-control"
                               required>

                    </div>

                    <div class="col-md-2">

                        <label class="form-label">
                            Percentage
                        </label>

                        <input type="number"
                               step="0.01"
                               name="percentage"
                               class="form-control"
                               required>

                    </div>

                    <div class="col-md-2">

                        <label class="form-label">
                            Max Bonus
                        </label>

                        <input type="number"
                               step="0.01"
                               name="max_bonus"
                               class="form-control"
                               required>

                    </div>

                    <div class="col-md-2">

                        <label class="form-label">
                            Min Deposit
                        </label>

                        <input type="number"
                               step="0.01"
                               name="min_deposit"
                               class="form-control"
                               required>

                    </div>

                    <div class="col-md-2">

                        <label class="form-label">
                            Turnover
                        </label>

                        <input type="number"
                               step="0.01"
                               name="turnover"
                               class="form-control"
                               required>

                    </div>

                    <div class="col-md-2">

                        <label class="form-label">
                            Expired Days
                        </label>

                        <input type="number"
                               name="expired_days"
                               class="form-control"
                               required>

                    </div>

                    <div class="col-md-2">

                        <label class="form-label">
                            Sort
                        </label>

                        <input type="number"
                               name="sort"
                               class="form-control"
                               required>

                    </div>

                    <div class="col-md-2">

                        <label class="form-label">
                            Status
                        </label>

                        <select name="status"
                                class="form-select"
                                required>

                            <option value="active">
                                active
                            </option>

                            <option value="inactive">
                                inactive
                            </option>

                        </select>

                    </div>

                    <div class="col-md-6">

                        <label class="form-label">
                            Description
                        </label>

                        <textarea name="description"
                                  rows="2"
                                  class="form-control"></textarea>

                    </div>

                </div>

                <div class="mt-4 d-flex gap-2">

                    <button class="btn btn-success">

                        <i class="ti tabler-device-floppy me-1"></i>
                        Simpan

                    </button>

                    <button type="button"
                            class="btn btn-outline-secondary"
                            id="cancelBonusAdd">

                        Batal

                    </button>

                </div>

            </form>

        </div>

    </div>

    {{-- EDIT BONUS --}}
    <div class="card border-0 shadow-sm mb-4 d-none glass-card edit-highlight"
         id="editBonusCard">

        <div class="card-header card-header-custom">

            <h6 class="mb-1 text-white fw-semibold">
                Edit Bonus
            </h6>

            <small class="text-body-secondary">
                Update data bonus
            </small>

        </div>

        <div class="card-body">

            <form method="POST"
                  id="editBonusForm"
                  action="">

                @csrf
                @method('PUT')

                <div class="row g-3">

                    <div class="col-md-4">

                        <label class="form-label">
                            Title
                        </label>

                        <input id="e_title"
                               name="title"
                               class="form-control"
                               required>

                    </div>

                    <div class="col-md-2">

                        <label class="form-label">
                            Percentage
                        </label>

                        <input id="e_percentage"
                               type="number"
                               step="0.01"
                               name="percentage"
                               class="form-control"
                               required>

                    </div>

                    <div class="col-md-2">

                        <label class="form-label">
                            Max Bonus
                        </label>

                        <input id="e_max_bonus"
                               type="number"
                               step="0.01"
                               name="max_bonus"
                               class="form-control"
                               required>

                    </div>

                    <div class="col-md-2">

                        <label class="form-label">
                            Min Deposit
                        </label>

                        <input id="e_min_deposit"
                               type="number"
                               step="0.01"
                               name="min_deposit"
                               class="form-control"
                               required>

                    </div>

                    <div class="col-md-2">

                        <label class="form-label">
                            Turnover
                        </label>

                        <input id="e_turnover"
                               type="number"
                               step="0.01"
                               name="turnover"
                               class="form-control"
                               required>

                    </div>

                    <div class="col-md-2">

                        <label class="form-label">
                            Expired Days
                        </label>

                        <input id="e_expired_days"
                               type="number"
                               name="expired_days"
                               class="form-control"
                               required>

                    </div>

                    <div class="col-md-2">

                        <label class="form-label">
                            Sort
                        </label>

                        <input id="e_sort"
                               type="number"
                               name="sort"
                               class="form-control"
                               required>

                    </div>

                    <div class="col-md-2">

                        <label class="form-label">
                            Status
                        </label>

                        <select id="e_status"
                                name="status"
                                class="form-select"
                                required>

                            <option value="active">
                                active
                            </option>

                            <option value="inactive">
                                inactive
                            </option>

                        </select>

                    </div>

                    <div class="col-md-6">

                        <label class="form-label">
                            Description
                        </label>

                        <textarea id="e_description"
                                  name="description"
                                  rows="2"
                                  class="form-control"></textarea>

                    </div>

                </div>

                <div class="mt-4 d-flex gap-2">

                    <button class="btn btn-primary">

                        <i class="ti tabler-device-floppy me-1"></i>
                        Update

                    </button>

                    <button type="button"
                            class="btn btn-outline-secondary"
                            id="cancelBonusEdit">

                        Batal

                    </button>

                </div>

            </form>

        </div>

    </div>

    {{-- TABLE --}}
    <div class="card border-0 shadow-sm overflow-hidden">

        {{-- header --}}
        <div class="card-header border-0 bg-transparent d-flex justify-content-between align-items-center flex-wrap gap-2">

            <div>

                <h6 class="mb-1 fw-semibold text-white">
                    Bonus List
                </h6>

                <small class="text-body-secondary">
                    Semua data bonus website
                </small>

            </div>

            <span class="badge rounded-pill bg-label-info px-3 py-2">
                {{ count($bonuses ?? []) }} Bonus
            </span>

        </div>

        {{-- table --}}
        <div class="card-body p-0">

            <div class="table-responsive">

                <table class="table table-hover align-middle mb-0 text-nowrap">

                    <thead class="table-dark">

                        <tr>

                            <th>ID</th>
                            <th>Title</th>
                            <th>%</th>
                            <th>Max</th>
                            <th>Min Dep</th>
                            <th>Turnover</th>
                            <th>Expired</th>
                            <th>Status</th>
                            <th>Sort</th>
                            <th class="text-center">Action</th>

                        </tr>

                    </thead>

                    <tbody>

                        @forelse($bonuses as $b)

                            <tr>

                                <td class="fw-semibold text-body-secondary">
                                    #{{ $b->id }}
                                </td>

                                <td>

                                    <div class="fw-semibold text-white">
                                        {{ $b->title }}
                                    </div>

                                </td>

                                <td>
                                    {{ $b->percentage }}%
                                </td>

                                <td>
                                    Rp {{ number_format((float) $b->max_bonus, 0, ',', '.') }}
                                </td>

                                <td>
                                    Rp {{ number_format((float) $b->min_deposit, 0, ',', '.') }}
                                </td>

                                <td>
                                    Rp {{ number_format((float) $b->turnover, 0, ',', '.') }}
                                </td>

                                <td>
                                    {{ $b->expired_days }} hari
                                </td>

                                <td>

                                    @if($b->status === 'active')

                                        <span class="badge bg-success">
                                            active
                                        </span>

                                    @else

                                        <span class="badge bg-danger">
                                            inactive
                                        </span>

                                    @endif

                                </td>

                                <td>
                                    {{ $b->sort }}
                                </td>

                                <td class="text-center">

                                    <div class="d-flex justify-content-center gap-2">

                                        <button type="button"
                                                class="btn btn-sm btn-primary btn-edit-bonus"

                                                data-update-url="{{ route('admin.promo.bonus.update', $b->id) }}"
                                                data-title="{{ e($b->title) }}"
                                                data-description="{{ e($b->description) }}"
                                                data-percentage="{{ $b->percentage }}"
                                                data-max-bonus="{{ $b->max_bonus }}"
                                                data-min-deposit="{{ $b->min_deposit }}"
                                                data-turnover="{{ $b->turnover }}"
                                                data-expired-days="{{ $b->expired_days }}"
                                                data-status="{{ $b->status }}"
                                                data-sort="{{ $b->sort }}">

                                            <i class="ti tabler-edit me-1"></i>
                                            Edit

                                        </button>

                                        <form method="POST"
                                              action="{{ route('admin.promo.bonus.destroy', $b->id) }}">

                                            @csrf
                                            @method('DELETE')

                                            <button class="btn btn-sm btn-danger"
                                                    onclick="return confirm('Hapus bonus ini?')">

                                                <i class="ti tabler-trash me-1"></i>
                                                Delete

                                            </button>

                                        </form>

                                    </div>

                                </td>

                            </tr>

                        @empty

                            <tr>

                                <td colspan="10"
                                    class="text-center py-5 text-body-secondary">

                                    Tidak ada data bonus

                                </td>

                            </tr>

                        @endforelse

                    </tbody>

                </table>

            </div>

        </div>

    </div>

</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {

    const addBonusCard = document.getElementById('addBonusCard');
    const editBonusCard = document.getElementById('editBonusCard');
    const editBonusForm = document.getElementById('editBonusForm');

    const btnToggleAddBonus = document.getElementById('btnToggleAddBonus');
    const cancelBonusAdd = document.getElementById('cancelBonusAdd');

    // ======================
    // TOGGLE ADD
    // ======================
    btnToggleAddBonus.addEventListener('click', function () {

        editBonusCard.classList.add('d-none');

        addBonusCard.classList.toggle('d-none');

        if (!addBonusCard.classList.contains('d-none')) {

            addBonusCard.scrollIntoView({
                behavior: 'smooth'
            });

        }

    });

    // ======================
    // CLOSE ADD
    // ======================
    cancelBonusAdd.addEventListener('click', function () {

        addBonusCard.classList.add('d-none');

    });

    // ======================
    // CLOSE EDIT
    // ======================
    function closeBonusEdit() {

        editBonusCard.classList.add('d-none');

        editBonusForm.reset();

        editBonusForm.action = '';

    }

    // ======================
    // EDIT BUTTON
    // ======================
    document.querySelectorAll('.btn-edit-bonus').forEach(btn => {

        btn.addEventListener('click', function () {

            addBonusCard.classList.add('d-none');

            editBonusForm.action =
                this.dataset.updateUrl || '';

            document.getElementById('e_title').value =
                this.dataset.title || '';

            document.getElementById('e_description').value =
                this.dataset.description || '';

            document.getElementById('e_percentage').value =
                this.dataset.percentage || 0;

            document.getElementById('e_max_bonus').value =
                this.dataset.maxBonus || 0;

            document.getElementById('e_min_deposit').value =
                this.dataset.minDeposit || 0;

            document.getElementById('e_turnover').value =
                this.dataset.turnover || 0;

            document.getElementById('e_expired_days').value =
                this.dataset.expiredDays || 1;

            document.getElementById('e_status').value =
                this.dataset.status || 'active';

            document.getElementById('e_sort').value =
                this.dataset.sort || 1;

            editBonusCard.classList.remove('d-none');

            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });

        });

    });

    document.getElementById('cancelBonusEdit')
        .addEventListener('click', closeBonusEdit);

});
</script>
@endpush