@extends('layouts.customer')

@section('content')
<style type="text/css">
    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%;
}
.dropdown-toggle::after{
    margin-top: 7px;
    font-size: 17px;
}
</style>
    <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <h1>Manage Tier</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">
                                <a href="{{url('/')}}/program-settings/manage-tiers">Tiers</a>
                            </li>
                            <li class="breadcrumb-item active" aria-current="page">Add Tier</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">
                           
                            @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 id="AddTier"
      action="{{ str_replace('http:', 'https:', route('manage-tiers.store',['account'=>$account])) }}"
      method="POST">
    @csrf

    <!-- ================= Tier Information ================= -->
    <h5 class="mb-3">Tier Information</h5>

    <div class="form-row">
        <div class="form-group col-md-12">
            <label for="title">Tier Title</label>
            <input type="text"
                   class="form-control"
                   name="title"
                   id="title"
                   value="{{ old('title') }}"
                   placeholder="e.g. Silver, Gold, Platinum"
                   required>
            <small class="text-muted">
                Short, recognizable name for this tier.
            </small>
        </div>
    </div>

    <div class="form-row">
        <div class="form-group col-md-12">
            <label for="description">Tier Description</label>
            <textarea class="form-control"
                      name="description"
                      id="description"
                      rows="3"
                      placeholder="Briefly describe benefits, eligibility, or purpose of this tier"
                      required>{{ old('description') }}</textarea>
            <small class="text-muted">
                This helps to understand how this tier is used.
            </small>
        </div>
    </div>

    <!-- ================= Tier Rules ================= -->
    <h5 class="mt-4 mb-3">Tier Rules</h5>

    <div class="form-row">
        <div class="form-group col-md-6">
            <label for="min_points">Minimum Points Required</label>
            <input type="number"
                   class="form-control"
                   name="min_points"
                   id="min_points"
                   value="{{ old('min_points') }}"
                   placeholder="e.g. 500"
                   min="0"
                   step="1"
                   required>
            <small class="text-muted">
                Minimum points a customer must earn to reach this tier.
            </small>
        </div>

        <div class="form-group col-md-6">
            <label for="points_in_dollor">Conversion Rate ($1 = Points)</label>
            <input type="number"
                   class="form-control"
                   name="points_in_dollor"
                   id="points_in_dollor"
                   value="{{ old('points_in_dollor') }}"
                   placeholder="e.g. 10 (1 USD = 10 points)"
                   min="0"
                   step="0.01"
                   required>
            <small class="text-muted">
                Defines how many points are earned per $1 spent.
            </small>
        </div>
    </div>

    <!-- ================= Tier Controls ================= -->
    <h5 class="mt-4 mb-3">Tier Controls</h5>

    <div class="form-row">
        <div class="form-group col-md-6">
            <label for="status">Tier Visibility</label>
            <select class="form-control" name="status" id="status" required>
                <option value="">Select visibility</option>
                <option value="1" {{ old('status') === '1' ? 'selected' : '' }}>
                    Active (Visible)
                </option>
                <option value="0" {{ old('status') === '0' ? 'selected' : '' }}>
                    Inactive (Hidden)
                </option>
            </select>
            <small class="text-muted">
                Controls whether this tier appears in listings.
            </small>
        </div>

        <div class="form-group col-md-6">
            <label for="is_active">Tier Availability</label>
            <select class="form-control" name="is_active" id="is_active" required>
                <option value="">Select availability</option>
                <option value="1" {{ old('is_active') === '1' ? 'selected' : '' }}>
                    Activate (Usable)
                </option>
                <option value="0" {{ old('is_active') === '0' ? 'selected' : '' }}>
                    Deactivate (Disabled)
                </option>
            </select>
            <small class="text-muted">
                Controls whether customers can earn or use this tier.
            </small>
        </div>
    </div>

    <!-- ================= Hidden Fields ================= -->
    <input type="hidden" name="rest_id" value="7">

    <!-- ================= Submit ================= -->
    <div class="mt-4">
        <button type="submit" class="btn btn-primary px-4">
            Save Tier
        </button>
    </div>
</form>

                        </div>
                    </div>
                </div>
            </div>
        </div>
@endsection
 
  <link rel="stylesheet" href="{{ secure_url('css/bootstrap-multiselect.css')}}">
@section('script')
 <script src="{{ secure_url('js/bootstrap-multiselect.min.js')}}"></script>
   <script type="text/javascript">
        $("#AddTier").validate();
   </script>
@endsection