@extends('staff.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('staff.cheque_in_out_report') }}"
           class="btn btn-sm btn-outline-primary">

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

        </a>

        <h3 class="mb-0 text-white fw-bold">
                     Cheque In/Out Details
        </h3>

    </div>


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

        


        <form id="addReminderForm">

            <div class="row g-4">


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

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

                        Customer Name
                        <span class="text-danger">*</span>

                    </label>

                    <div class="input-group">

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

                        <input type="text"
                               id="customerName"
                               name="customer_name"
                               class="form-control"
                               placeholder="Enter customer name"
                               required>

                    </div>

                </div>


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

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

                        Mobile Number
                        <span class="text-danger">*</span>

                    </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"
                               inputmode="numeric"
                               required>

                    </div>

                </div>


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

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

                        Reminder 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>


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

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

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

                    </label>

                    <div class="input-group">

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

                        <select id="reminderStatus"
                                name="status"
                                class="form-select"
                                required>

                         

                            <option value="In">
                                In
                            </option>

                            <option value="Out">
                                Out
                            </option>

                        </select>

                    </div>

                </div>



                {{-- NET WEIGHT --}}
                <div class="col-12 col-md-6"
                     id="netWeightWrapper"
                     style="display:none;">

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

                        Net Weight
                        <span class="text-danger">*</span>

                    </label>

                    <div class="input-group">

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

                        <input type="number"
                               id="netWeight"
                               name="net_weight"
                               class="form-control"
                               placeholder="Enter net weight"
                               step="0.001"
                               min="0">

                        <span class="input-group-text">
                            g
                        </span>

                    </div>

                </div>


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

                    <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 description..."></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

                        </button>

                    </div>

                </div>

            </div>

        </form>

    </div>

</div>


@endsection