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

<style>
    .form-group {
        margin-bottom: 1.5rem;
    }

    .form-control {
        width: 100%;
        padding: 10px;
        border: 1px solid #ced4da;
        border-radius: 4px;
    }

    .form-control:focus {
        border-color: #80bdff;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

    .btn-primary {
        background-color: #007bff;
        border-color: #007bff;
        padding: 10px 20px;
        border-radius: 4px;
        cursor: pointer;
    }

    .btn-primary:hover {
        background-color: #0056b3;
        border-color: #004085;
    }

    .text-danger {
        color: #dc3545;
        font-size: 0.875em;
    }
</style>

<div class="main-content">
    <section class="section">

        <div class="section-header mb-0">
            <h1>
                <i class="fa fa-tags" aria-hidden="true"></i>
                Add Coupon
            </h1>
        </div>
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="/admin/coupons">Coupons</a>
            </li>
            <li class="breadcrumb-item">
                <a href="#">Add Coupon</a>
            </li>
        </ol>

        <div class="card">
            <div class="card-header">
                @if(Session::has('success'))
                <div class="alert alert-danger">
                    <p class="alert alert-info">{{ Session::get('success') }}</p>
                </div>
                @endif
            </div>
        </div>

        <div class="section-body">
            <div class="row wrapper  white-bg page-heading">
                <div class="col-sm-8"></div>
                <div class="col-sm-4">
                    <div class="title-action"></div>
                </div>
            </div>
            <div class="wrapper wrapper-content">
                <div class="animated fadeInUp card">
                    <form role="form" class="form-edit-add" action="{{ route('coupons.store') }}" method="POST" enctype="multipart/form-data">
                        {{ csrf_field() }}

                        <div class="panel-body card-body">

                            @if (count($errors) > 0)
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                            @endif
                            <div class="form-group">
                                <label class="control-label">Selct Service for Coupon</label>
                                <select class="form-control" name="visibility" id="service-select" required>
                                    <option value="">Select Service</option>
                                    <option value="product">Product</option>
                                    <option value="gold">Gold</option>
                                    <option value="sip">Sip</option>
                                    <option value="game">Game</option>
                                    <option value="member">Membership</option>
                                </select>
                                @error('visibility')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="form-group">
                                <label class="control-label">Coupon Code</label>
                                <input class="form-control" required type="text" name="code" />
                                @error('code')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="form-group">
                                <label class="control-label">Percent Off</label>
                                <input class="form-control" required type="number" step="0.01" name="percent_off" />
                                @error('percent_off')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="form-group">
                                <label class="control-label">Number of Users</label>
                                <input class="form-control" required type="number" name="no_of_users" />
                                @error('no_of_users')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="form-group">
                                <label class="control-label">Start Date</label>
                                <input class="form-control" required type="date" name="start_date" />
                                @error('start_date')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="form-group">
                                <label class="control-label">End Date</label>
                                <input class="form-control" required type="date" name="end_date" />
                                @error('end_date')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="form-group">
                                <label class="control-label">Number of Times Usable</label>
                                <input class="form-control" required type="number" name="no_of_times" />
                                @error('no_of_times')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="form-group" id="level-field">
                                <label class="control-label">Level</label>
                                <input class="form-control" required type="number" name="level" />
                                @error('level')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="form-group">
                                <label class="control-label">Visibility</label>
                                <select class="form-control" name="visibility" required>
                                    <option value="">Select Visiblity</option>
                                    <option value="memberonly">Member Only</option>
                                    <option value="useronly">User Only</option>
                                    <option value="both">Both</option>
                                </select>
                                @error('visibility')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                            
                            <div class="panel-footer">
                                <button type="submit" class="btn btn-primary save mt-3">Save</button>
                            </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
</div>


<script>
    document.getElementById('service-select').addEventListener('change', function() {
        var levelField = document.getElementById('level-field');
        if (this.value === 'membership') {
            levelField.style.display = 'none';
        } else {
            levelField.style.display = 'block';
        }
    });

    // Trigger the change event on page load to handle pre-selected value
    document.getElementById('service-select').dispatchEvent(new Event('change'));
</script>
@endsection