@extends('Admin.layout')

@section('content')

<div class="page-view w-100">

    {{-- PAGE HEADER --}}
    <div class="d-flex align-items-center gap-2 mb-3">

        <a href="{{  route('reminder') }}"
           class="btn btn-sm btn-outline-primary">

            <i class="ti ti-arrow-left"></i>

        </a>

        <h3 class="mb-0 text-white fw-bold">
            Add Reminder
        </h3>

    </div>


    {{-- FORM CARD --}}
    <div class="card bank-card p-3 p-md-4 w-100">

        <div class="mb-4">

            <h5 class="text-white mb-1">
                Reminder Details
            </h5>

            <p class="text-muted mb-0">
                Add a new reminder for follow-ups, payments, renewals and other activities.
            </p>

        </div>


        <form id="addReminderForm">

            <div class="row g-4">


                {{-- DATE --}}
                <div class="col-12 col-md-6">

                    <label for="reminderDate"
                           class="form-label text-white">

                        Date
                        <span class="text-danger">*</span>

                    </label>

                    <div class="input-group">

                        <span class="input-group-text">
                            <i class="ti ti-calendar-event"></i>
                        </span>

                        <input type="date"
                               id="reminderDate"
                               name="date"
                               class="form-control"
                               required>

                    </div>

                </div>


                {{-- TITLE --}}
                <div class="col-12 col-md-6">

                    <label for="reminderTitle"
                           class="form-label text-white">

                        Title
                        <span class="text-danger">*</span>

                    </label>

                    <div class="input-group">

                        <span class="input-group-text">
                            <i class="ti ti-bell"></i>
                        </span>

                        <input type="text"
                               id="reminderTitle"
                               name="title"
                               class="form-control"
                               placeholder="Enter reminder title"
                               required>

                    </div>

                </div>


                {{-- TYPE --}}
                <div class="col-12 col-md-6">

                    <label for="reminderType"
                           class="form-label text-white">

                        Type
                        <span class="text-danger">*</span>

                    </label>

                    <div class="input-group">

                        <span class="input-group-text">
                            <i class="ti ti-category"></i>
                        </span>

                                                <input type="text" class="form-control" placeholder="Enter Type">


                    </div>

                </div>


                {{-- MOBILE --}}
                <div class="col-12 col-md-6">

                    <label for="reminderMobile"
                           class="form-label text-white">

                        Mobile Number

                    </label>

                    <div class="input-group">

                        <span class="input-group-text">
                            <i class="ti ti-phone"></i>
                        </span>

                        <input type="tel"
                               id="reminderMobile"
                               name="mobile"
                               class="form-control"
                               placeholder="Enter mobile number"
                               maxlength="10">

                    </div>

                </div>


                {{-- DESCRIPTION --}}
                <div class="col-12">

                    <label for="reminderDescription"
                           class="form-label text-white">

                        Description
                        <span class="text-danger">*</span>

                    </label>

                    <textarea id="reminderDescription"
                              name="description"
                              class="form-control"
                              rows="5"
                              placeholder="Enter reminder description..."
                              required></textarea>

                </div>


                {{-- BUTTONS --}}
                <div class="col-12">

                    <div class="d-flex flex-column flex-sm-row justify-content-end gap-2 pt-2">

                        

                        <button type="reset"
                                class="btn btn-outline-primary">

                            <i class="ti ti-refresh me-1"></i>

                            Reset

                        </button>


                        <button type="submit"
                                class="btn btn-primary">

                            <i class="ti ti-device-floppy me-1"></i>

                            Save Reminder

                        </button>

                    </div>

                </div>

            </div>

        </form>

    </div>

</div>



@endsection