@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">Edit 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">Edit 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
                <form action="{{ secure_url('discounts/update/'.$data->id) }}" 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="Title" value="{{ old('title', $data->title) }}">
                            </div>

                            <div class="form-group col-md-6">
                                <label for="description">Description</label>
                                <input type="text" class="form-control" name="description" id="description"
                                    placeholder="Description" value="{{ old('description', $data->description) }}">
                            </div>
                        </div>

                        <!-- Condition: Discount has 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', isset($data->discount_code) ?? 0) == 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', isset($data->discount_code) ?? 0) == 0 ? 'checked' : '' }}>
                                    <label class="custom-control-label" for="has_code_no">No</label>
                                </div>
                            </div>
                        </div>

                        <!-- Discount details (conditionally visible) -->
                        <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="Discount Code" value="{{ old('discount_code', $data->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', $data->discount_type) == 1) selected @endif>Percentage</option>
                                        <option value="2" @if(old('discount_type', $data->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', $data->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', $data->expiry_date?->format('Y-m-d')) }}">
                                </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"
                                            @if($data->max_usage || $data->max_usage_per_user) checked @endif>
                                        <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"
                                            @if(!$data->max_usage && !$data->max_usage_per_user) checked @endif>
                                        <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">
                                        <h6>Customer Redeem Limit?</h6>
                                        <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"
                                                @if(old('max_usage_per_user', isset($data->max_usage_per_user) ?? 0) == '1') checked @endif>
                                            <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"
                                                @if(old('max_usage_per_user', isset($data->max_usage_per_user) ?? 0) == '0') checked @endif>
                                            <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" value="{{ old('max_usage', $data->max_usage) }}">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Status (always visible, at the end) -->
                        <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', $data->status) == '1') selected @endif>Active</option>
                                <option value="0" @if(old('status', $data->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">Update</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() {
        // --- Helper functions ---
        function toggleDiscountFields() {
            if ($('input[name="has_code"]:checked').val() == '1') {
                $('#discountDetails').slideDown();
            } else {
                $('#discountDetails').slideUp();
                $('#limitFields').slideUp();
            }
        }

        function toggleLimitFields() {
            if ($('input[name="has_limit"]:checked').val() == '1') {
                $('#limitFields').slideDown();
            } else {
                $('#limitFields').slideUp();
            }
        }

        // --- Initialize form state on page load ---
        toggleDiscountFields();
        toggleLimitFields();

        // --- Watch for changes ---
        $('input[name="has_code"]').change(function() {
            toggleDiscountFields();
        });

        $('input[name="has_limit"]').change(function() {
            toggleLimitFields();
        });
    });

    </script>
  @endsection