{{-- Edit Marketplace Coupon --}}
@extends('layouts/contentNavbarLayout')
@section('title', 'Edit 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">Edit</li>
    </ol>
</nav>
<div class="container">
    <h1 class="mb-4">Edit Marketplace Coupon</h1>
    <form action="{{ route('marketplaceCoupons.update', $coupon->id) }}" method="POST" enctype="multipart/form-data">
        @csrf
        @method('PUT')
        <div class="mb-3">
            <label for="name" class="form-label">Name</label>
            <input type="text" class="form-control" id="name" name="name" value="{{ $coupon->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>{{ $coupon->description }}</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/*">
            @if($coupon->image)
                <img src="{{ $coupon->image }}" alt="Image" style="width:60px;height:60px;border-radius:8px;object-fit:cover;" class="mt-2">
            @endif
            @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" {{ $coupon->type == 'code' ? 'selected' : '' }}>Code</option>
                <option value="url" {{ $coupon->type == 'url' ? 'selected' : '' }}>URL</option>
            </select>
            @error('type')<div class="text-danger">{{ $message }}</div>@enderror
        </div>
        <div class="mb-3" id="code_group" style="{{ $coupon->type == 'url' ? 'display:none;' : '' }}">
            <label for="code" class="form-label">Coupon Code</label>
            <input type="text" class="form-control" id="code" name="code" value="{{ $coupon->code }}">
            @error('code')<div class="text-danger">{{ $message }}</div>@enderror
        </div>
        <div class="mb-3" id="url_group" style="{{ $coupon->type == 'url' ? '' : 'display:none;' }}">
            <label for="url" class="form-label">Redemption URL</label>
            <input type="url" class="form-control" id="url" name="url" 
                   value="{{ $coupon->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" {{ $coupon->discount_type === 'fixed' ? 'selected' : '' }}>Fixed</option>
                <option value="percentage" {{ $coupon->discount_type === 'percentage' ? 'selected' : '' }}>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" value="{{ $coupon->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" value="{{ $coupon->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');
                var monthlyUsesInput = document.getElementById('monthly_uses');
                if (document.getElementById('is_monthly_uses').checked) {
                    monthlyUsesGroup.style.display = '';
                    monthlyUsesInput.required = true;
                } else {
                    monthlyUsesGroup.style.display = 'none';
                    monthlyUsesInput.required = false;
                    monthlyUsesInput.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" value="{{ $coupon->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" value="{{ $coupon->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" 
                   value="{{ $coupon->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" 
                   {{ $coupon->is_monthly_uses ? 'checked' : '' }}
                   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="{{ $coupon->is_monthly_uses ? '' : '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" value="{{ $coupon->monthly_uses }}" min="1"
                   {{ $coupon->is_monthly_uses ? 'required' : '' }}>
            @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>
                @foreach($sections as $section)
                    <option value="{{ $section->id }}" {{ $coupon->market_place_section_id == $section->id ? 'selected' : '' }}>{{ $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" value="{{ $coupon->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" value="{{ $coupon->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" {{ $coupon->status === 'active' ? 'selected' : '' }}>Active</option>
                <option value="inactive" {{ $coupon->status === 'inactive' ? 'selected' : '' }}>Inactive</option>
            </select>
            @error('status')<div class="text-danger">{{ $message }}</div>@enderror
        </div>
        <button type="submit" class="btn btn-success">Update Coupon</button>
        <a href="{{ route('marketplaceCoupons.index') }}" class="btn btn-secondary ms-2">Cancel</a>
    </form>
</div>
@endsection