@extends('layouts.customer')
@section('content')
<style type="text/css">
    .pac-container{
        top : 300px !important;
    }
    div.btn-group{
            width: 100%;
            border-radius: 0.1rem;
            border: 1px solid #d7d7d7;
    }
    .multiselect-selected-text{
        float: left;
    }
    b.caret{
       margin-left: 79%;
    }
    ul.multiselect-container.dropdown-menu.show {
    width: 100%;
}
</style>
<link rel="stylesheet" href="/css/bootstrap-multiselect.css">
   <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <h1>Discounts</h1>
                    <nav class="breadcrumb-container d-none d-sm-block d-lg-inline-block" aria-label="breadcrumb">
                        <ol class="breadcrumb pt-0">
                            <li class="breadcrumb-item">
                               <a href="{{url('/')}}/dashboard">Dashboard</a>
                            </li>
                            
                            <li class="breadcrumb-item" aria-current="page">Discounts</li>
                             <li class="breadcrumb-item active" aria-current="page">Add Discount</li>
                        </ol>
                    </nav>
                    <div class="separator mb-5"></div>
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                    <div class="card mb-4">
                        <div class="card-body">
                            <h5 class="mb-4">Create Discount</h5>
                          @if ($errors->any())
                                <div class="alert alert-danger">
                                    <strong>Oops!</strong> There were some problems with your input.<br><br>
                                    <ul>
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif
                            <div class="row mb-2">
                                @if ($message = Session::get('error'))
                                    <div class="w-100 alert alert-danger">
                                        <p>{{ $message }}</p>
                                    </div>
                                @endif
                            </div>
                           <form action="{{ secure_url('discounts/create') }}" method="POST">
                            @csrf

                            <div class="">

                                <!-- Title & Description -->
                                <div class="form-row">
                                    <div class="form-group col-md-6">
                                        <label for="title">Title</label>
                                        <input type="text" class="form-control" name="title" id="title"
                                            placeholder="Enter Title" value="{{ old('title') }}">
                                    </div>

                                    <div class="form-group col-md-6">
                                        <label for="description">Description</label>
                                        <textarea class="form-control" name="description" id="description"
                                            placeholder="Enter Description">{{ old('description') }}</textarea>
                                    </div>
                                </div>

                                <!-- Condition: Does this discount have a code? -->
                                <div class="form-group mt-3">
                                    <label><strong>Does this discount have a code?</strong></label>
                                    <div>
                                        <div class="custom-control custom-radio custom-control-inline">
                                            <input type="radio" id="has_code_yes" name="has_code" class="custom-control-input" value="1" {{ old('has_code') == 1 ? 'checked' : '' }}>
                                            <label class="custom-control-label" for="has_code_yes">Yes</label>
                                        </div>
                                        <div class="custom-control custom-radio custom-control-inline">
                                            <input type="radio" id="has_code_no" name="has_code" class="custom-control-input" value="0" {{ old('has_code', 0) == 0 ? 'checked' : '' }}>
                                            <label class="custom-control-label" for="has_code_no">No</label>
                                        </div>
                                    </div>
                                </div>

                                <!-- Conditional fields: Only visible if 'has code' = Yes -->
                                <div id="discountDetails" class="mt-3" style="display:none;">
                                    <div class="form-row">
                                        <div class="form-group col-md-6">
                                            <label for="discount_code">Discount Code</label>
                                            <input type="text" class="form-control" name="discount_code" id="discount_code"
                                                placeholder="Enter Discount Code" value="{{ old('discount_code') ?? '' }}">
                                        </div>

                                        <div class="form-group col-md-6">
                                            <label for="discount_type">Discount Type</label>
                                            <select name="discount_type" id="discount_type" class="form-control">
                                                <option value="1" @if(old('discount_type') == 1) selected @endif>Percentage</option>
                                                <option value="2" @if(old('discount_type') == 2) selected @endif>Flat</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="form-row">
                                        <div class="form-group col-md-6">
                                            <label for="discount_value">Discount Value</label>
                                            <input type="number" class="form-control" name="discount_value" id="discount_value"
                                                placeholder="Discount Value" value="{{ old('discount_value') ?? '' }}">
                                        </div>

                                        <div class="form-group col-md-6">
                                            <label for="expiry_date">Expiry Date</label>
                                            <input type="date" class="form-control" name="expiry_date" id="expiry_date"
                                                value="{{ old('expiry_date') }}">
                                        </div>
                                    </div>

                                    <!-- Ask if discount has usage limit -->
                                    <div class="form-group mt-3">
                                        <label><strong>Does this discount have a usage limit?</strong></label>
                                        <div>
                                            <div class="custom-control custom-radio custom-control-inline">
                                                <input type="radio" id="has_limit_yes" name="has_limit" class="custom-control-input" value="1" {{ old('has_limit') == 1 ? 'checked' : '' }}>
                                                <label class="custom-control-label" for="has_limit_yes">Yes</label>
                                            </div>
                                            <div class="custom-control custom-radio custom-control-inline">
                                                <input type="radio" id="has_limit_no" name="has_limit" class="custom-control-input" value="0" {{ old('has_limit', 0) == 0 ? 'checked' : '' }}>
                                                <label class="custom-control-label" for="has_limit_no">No</label>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Limit Fields -->
                                    <div id="limitFields" style="display:none;">
                                        <div class="form-row mt-3">
                                            <div class="form-group col-md-6">
                                                <label>Customer Redeem Limit?</label>
                                                <div class="custom-control custom-radio">
                                                    <input type="radio" id="max_usage_per_user-one" value="1" name="max_usage_per_user"
                                                        class="custom-control-input" aria-describedby="max_usage_per_user-error">
                                                    <label class="custom-control-label" for="max_usage_per_user-one">One Order Only</label>
                                                </div>
                                                <div class="custom-control custom-radio">
                                                    <input type="radio" id="max_usage_per_user-multiple" value="0" name="max_usage_per_user"
                                                        class="custom-control-input" aria-describedby="max_usage_per_user-error">
                                                    <label class="custom-control-label" for="max_usage_per_user-multiple">Multiple Orders</label>
                                                </div>
                                            </div>

                                            <div class="form-group col-md-6">
                                                <label for="max_usage">Code Redeem Limit</label>
                                                <input type="number" class="form-control" name="max_usage" id="max_usage"
                                                    placeholder="Usage Limit">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Status moved to bottom -->
                                <div class="form-group mt-4">
                                    <label for="status"><strong>Status</strong></label>
                                    <select name="status" class="form-control w-25">
                                        <option value="1" @if(old('status') == '1') selected @endif>Active</option>
                                        <option value="0" @if(old('status') == '0') selected @endif>Inactive</option>
                                    </select>
                                </div>

                                <div class="form-group text-right mt-4">
                                    <button type="submit" class="btn btn-primary px-5">Save</button>
                                </div>
                            </div>
                        </form>

                        </div>
                    </div>
                </div>
            </div>
        </div>
@endsection
@section('script')
<script src="/js/bootstrap-multiselect.min.js"></script>
  <script >
	$('#multiple-checkboxes').multiselect({
      includeSelectAllOption: true,
      nonSelectedText:'Select users'
    });

    $(document).ready(function() {
        // Show or hide the main discount section based on "has code"
        $('input[name="has_code"]').change(function() {
            if ($(this).val() == '1') {
                $('#discountDetails').slideDown();
            } else {
                $('#discountDetails').slideUp();
                $('#limitFields').slideUp();
            }
        });

        // Show or hide limit fields if user says the discount has limit
        $('input[name="has_limit"]').change(function() {
            if ($(this).val() == '1') {
                $('#limitFields').slideDown();
            } else {
                $('#limitFields').slideUp();
            }
        });

        // Now trigger it once on page load to apply initial state
        $('input[name="has_code"]:checked, input[name="has_limit"]:checked').trigger('change');
    });

    </script>
  @endsection