{{-- Create Marketplace Coupon --}}
@extends('layouts/contentNavbarLayout')
@section('title', 'Create Marketplace Coupon')

@section('content')
<nav aria-label="breadcrumb" class="mb-3">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
        <li class="breadcrumb-item"><a href="{{ route('marketplaceCoupons.index') }}">Marketplace Coupons</a></li>
        <li class="breadcrumb-item active">Create</li>
    </ol>
</nav>
<div class="container">
    <h1 class="mb-4">Add Marketplace Coupon</h1>
    <form action="{{ route('marketplaceCoupons.store') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="mb-3">
            <label for="name" class="form-label">Name</label>
            <input type="text" class="form-control" id="name" name="name" required>
            @error('name')<div class="text-danger">{{ $message }}</div>@enderror
        </div>
        <div class="mb-3">
            <label for="description" class="form-label">Description</label>
            <textarea class="form-control" id="description" name="description" rows="3" required></textarea>
            @error('description')<div class="text-danger">{{ $message }}</div>@enderror
        </div>
        <div class="mb-3">
            <label for="image" class="form-label">Image</label>
            <input type="file" class="form-control" id="image" name="image" accept="image/*" required>
            @error('image')<div class="text-danger">{{ $message }}</div>@enderror
        </div>
        <div class="mb-3">
            <label for="type" class="form-label">Type</label>
            <select class="form-select" id="type" name="type" required onchange="toggleCouponFields()">
                <option value="code">Code</option>
                <option value="url">URL</option>
            </select>
            @error('type')<div class="text-danger">{{ $message }}</div>@enderror
        </div>
        <div class="mb-3" id="code_group">
            <label for="code" class="form-label">Coupon Code</label>
            <input type="text" class="form-control" id="code" name="code">
            @error('code')<div class="text-danger">{{ $message }}</div>@enderror
        </div>
        <div class="mb-3" id="url_group" style="display: none;">
            <label for="url" class="form-label">Redemption URL</label>
            <input type="url" class="form-control" id="url" name="url" placeholder="https://example.com/redeem">
            @error('url')<div class="text-danger">{{ $message }}</div>@enderror
        </div>
        <div class="mb-3">
            <label for="discount_type" class="form-label">Discount Type</label>
            <select class="form-select" id="discount_type" name="discount_type" required onchange="toggleDiscountFields()">
                <option value="fixed">Fixed</option>
                <option value="percentage">Percentage</option>
            </select>
            @error('discount_type')<div class="text-danger">{{ $message }}</div>@enderror
        </div>
        <div class="mb-3">
            <label for="discount_value" class="form-label">Discount Value</label>
            <div class="input-group">
                <input type="number" step="0.01" class="form-control" id="discount_value" name="discount_value" required>
                <span class="input-group-text" id="discount_percent_sign" style="display:none">%</span>
            </div>
            @error('discount_value')<div class="text-danger">{{ $message }}</div>@enderror
        </div>
        <div class="mb-3" id="max_discount_value_group" style="display:none">
            <label for="max_discount_value" class="form-label">Max Discount Value</label>
            <input type="number" step="0.01" class="form-control" id="max_discount_value" name="max_discount_value">
        </div>
        <script>
            function toggleDiscountFields() {
                var type = document.getElementById('discount_type').value;
                var maxGroup = document.getElementById('max_discount_value_group');
                var percentSign = document.getElementById('discount_percent_sign');
                if (type === 'percentage') {
                    maxGroup.style.display = '';
                    percentSign.style.display = '';
                } else {
                    maxGroup.style.display = 'none';
                    percentSign.style.display = 'none';
                    document.getElementById('max_discount_value').value = '';
                }
            }
            
            function toggleCouponFields() {
                var type = document.getElementById('type').value;
                var codeGroup = document.getElementById('code_group');
                var urlGroup = document.getElementById('url_group');
                
                if (type === 'url') {
                    codeGroup.style.display = 'none';
                    urlGroup.style.display = '';
                } else {
                    codeGroup.style.display = '';
                    urlGroup.style.display = 'none';
                }
            }
            
            function toggleMonthlyUses() {
                var monthlyUsesGroup = document.getElementById('monthly_uses_group');
                if (document.getElementById('is_monthly_uses').checked) {
                    monthlyUsesGroup.style.display = '';
                } else {
                    monthlyUsesGroup.style.display = 'none';
                    document.getElementById('monthly_uses').value = '';
                }
            }
            document.addEventListener('DOMContentLoaded', function() {
                toggleDiscountFields();
                toggleCouponFields();
                toggleMonthlyUses();
            });
        </script>
        <div class="mb-3">
            <label for="start_date" class="form-label">Start Date</label>
            <input type="date" class="form-control" id="start_date" name="start_date" required>
            @error('start_date')<div class="text-danger">{{ $message }}</div>@enderror
        </div>
        <div class="mb-3">
            <label for="end_date" class="form-label">End Date</label>
            <input type="date" class="form-control" id="end_date" name="end_date" required>
            @error('end_date')<div class="text-danger">{{ $message }}</div>@enderror
        </div>
        <div class="mb-3">
            <label for="max_uses" class="form-label">Max Total Uses</label>
            <input type="number" class="form-control" id="max_uses" name="max_uses" min="1" required>
            @error('max_uses')<div class="text-danger">{{ $message }}</div>@enderror
        </div>
        <div class="mb-3 form-check">
            <input type="checkbox" class="form-check-input" id="is_monthly_uses" name="is_monthly_uses" value="1" onchange="toggleMonthlyUses()">
            <label class="form-check-label" for="is_monthly_uses">Set Monthly Usage Limit</label>
            @error('is_monthly_uses')<div class="text-danger">{{ $message }}</div>@enderror
        </div>
        <div class="mb-3" id="monthly_uses_group" style="display: none;">
            <label for="monthly_uses" class="form-label">Max Monthly Uses</label>
            <input type="number" class="form-control" id="monthly_uses" name="monthly_uses" min="1">
            @error('monthly_uses')<div class="text-danger">{{ $message }}</div>@enderror
        </div>
        <div class="mb-3">
            <label for="market_place_section_id" class="form-label">Section</label>
            <select class="form-select" id="market_place_section_id" name="market_place_section_id" required>
                <option value="">Select a section</option>
                @foreach($sections as $section)
                    <option value="{{ $section->id }}">{{ $section->name }}</option>
                @endforeach
            </select>
            @error('market_place_section_id')<div class="text-danger">{{ $message }}</div>@enderror
        </div>
        <div class="mb-3">
            <label for="price" class="form-label">Price</label>
            <input type="number" step="0.01" class="form-control" id="price" name="price">
            @error('price')<div class="text-danger">{{ $message }}</div>@enderror
        </div>
        <div class="mb-3">
            <label for="required_points" class="form-label">Required Points</label>
            <input type="number" class="form-control" id="required_points" name="required_points">
        </div>
        <div class="mb-3">
            <label for="status" class="form-label">Status</label>
            <select class="form-select" id="status" name="status" required>
                <option value="active">Active</option>
                <option value="inactive">Inactive</option>
            </select>
            @error('status')<div class="text-danger">{{ $message }}</div>@enderror
        </div>
        <button type="submit" class="btn btn-success">Create Coupon</button>
        <a href="{{ route('marketplaceCoupons.index') }}" class="btn btn-secondary ms-2">Cancel</a>
    </form>
</div>
@endsection