@include('admin.includes.header')
@include('admin.includes.sidebar')

{{-- form  --}}
<form id="myForm" enctype="multipart/form-data" method="POST">
    @csrf

<!--! [Start] Main Content !-->
    <!--! ================================================================ !-->
    <main class="nxl-container">
        <div class="nxl-content">
            <!-- [ page-header ] start -->
            <div class="page-header">
                <div class="page-header-left d-flex align-items-center">
                    <div class="page-header-title">
                        <h5 class="m-b-10">{{isset($data) ? 'Edit' : 'Add'  }} Discount</h5>
                    </div>
                    <ul class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{url('admin/dashboard')}}">Home</a></li>
                        <li class="breadcrumb-item">Create</li>
                    </ul>
                </div>
                <div class="page-header-right ms-auto">
                    <div class="page-header-right-items">
                        <div class="d-flex d-md-none">
                            <a href="javascript:void(0)" class="page-header-right-close-toggle">
                                <i class="feather-arrow-left me-2"></i>
                                <span>Back</span>
                            </a>
                        </div>
                        <div class="d-flex align-items-center gap-2 page-header-right-items-wrapper">
                            {{-- <a href="javascript:void(0);" class="btn btn-light-brand" data-bs-toggle="offcanvas" data-bs-target="#proposalSent">
                                <i class="feather-layers me-2"></i>
                                <span>Save & Send</span>
                            </a> --}}
                            <a href="javascript:void(0);" class="btn btn-primary successAlertMessage"  onclick="document.getElementById('myForm').submit();">
                                <i class="feather-save me-2"></i>
                                <span>Save</span>
                            </a>
                        </div>
                    </div>
                    <div class="d-md-none d-flex align-items-center">
                        <a href="javascript:void(0)" class="page-header-right-open-toggle">
                            <i class="feather-align-right fs-20"></i>
                        </a>
                    </div>
                </div>
            </div>
            <!-- [ page-header ] end -->
<!-- [ Main Content ] start -->
            <div class="main-content">
                <div class="row">
                    <div class="col-xl-12">
                        <div class="card stretch stretch-full">
                                <div class="card-body">
                                    @include('frontend.includes.msg')
                                    <div class="mb-4">
                                        <label class="form-label">Code <span class="text-danger">*</span></label>
                                        <input maxlength="10" type="text" value="{{ $data->code ?? ''}}" required name="code" class="form-control" placeholder="Code (Max:10)">
                                        @error('code')
                                            <div class=" my-1 p-1 alert alert-danger">
                                                {{ $message }}
                                            </div>
                                        @enderror
                                    </div>
                                    <div class="mb-4">
                                        <label class="form-label">Catgeory <span class="text-muted">( Optional )</span></label>
                                        @include('admin.components.select2-select', ['items' => $categories, 'name' => 'category_id','selected' => $data->category_id ?? null])
                                        @error('category_id')
                                            <div class="p-1 my-1 alert alert-danger">
                                                {{ $message }}
                                            </div>
                                        @enderror
                                    </div>
                                    <div class="mb-4">
                                        <label class="form-label">Discount type <span class="text-danger">*</span></label>
                                        <select class="select2" required name="type">
                                            <option 
                                            {{isset($data) && $data->type == 0 ? 'selected' : ''}}
                                            value="0" data-role="bg-primary">Flat</option>
                                            <option 
                                            {{isset($data) && $data->type == 1 ? 'selected' : ''}}
                                            value="1" data-role="bg-primary">Percentage</option>
                                        </select>
                                        @error('type')
                                            <div class="p-1 my-1 alert alert-danger">
                                                {{ $message }}
                                            </div>
                                        @enderror
                                    </div>
                                    <div class="mb-4 {{isset($data) && $data->type == 1 ? '' : 'd-none'}}" id="percentage" >
                                        <label class="form-label">Percentage <span class="text-danger">*</span></label>
                                        <input type="number" value="{{ $data->percentage ?? ''}}" name="percentage" class="form-control" placeholder="Percentage">
                                        @error('percentage')
                                            <div class="p-1 my-1 alert alert-danger">
                                                {{ $message }}
                                            </div>
                                        @enderror
                                        {{-- <select class="form-control" data-select2-selector="icon">
                                            <option value="lead" data-icon="feather-at-sign">Lead</option>
                                            <option value="coustomer" data-icon="feather-users">Coustomer</option>
                                        </select> --}}
                                    </div>
                                    <div class="mb-4">
                                        <label class="form-label">Amount / Max amount <span class="text-danger">*</span></label>
                                        <input type="number" value="{{ $data->amount ?? ''}}" required name="amount" class="form-control" placeholder="Amount">
                                        @error('amount')
                                            <div class="p-1 my-1 alert alert-danger">
                                                {{ $message }}
                                            </div>
                                        @enderror
                                        {{-- <select class="form-control" data-select2-selector="icon">
                                            <option value="lead" data-icon="feather-at-sign">Lead</option>
                                            <option value="coustomer" data-icon="feather-users">Coustomer</option>
                                        </select> --}}
                                    </div>
                                    <div class="mb-4">
                                        <label class="form-label">Limit <span class="text-muted">( Optional )</span></label>
                                        <input type="number" value="{{ $data->limit ?? ''}}" required name="limit" class="form-control" placeholder="Limit">
                                        @error('limit')
                                            <div class="p-1 my-1 alert alert-danger">
                                                {{ $message }}
                                            </div>
                                        @enderror{{-- <select class="form-control" data-select2-selector="icon">
                                            <option value="lead" data-icon="feather-at-sign">Lead</option>
                                            <option value="coustomer" data-icon="feather-users">Coustomer</option>
                                        </select> --}}
                                    </div>
                                    <div class="mb-4">
                                        <label class="form-label">Expiry <span class="text-muted">( Optional )</span></label>
                                        <input type="datetime-local" value="{{ $data->expires_at ?? ''}}" required name="expiry" class="form-control" placeholder="Amount">
                                        @error('expiry')
                                            <div class="p-1 my-1 alert alert-danger">
                                                {{ $message }}
                                            </div>
                                        @enderror
                                        {{-- <select class="form-control" data-select2-selector="icon">
                                            <option value="lead" data-icon="feather-at-sign">Lead</option>
                                            <option value="coustomer" data-icon="feather-users">Coustomer</option>
                                        </select> --}}
                                    </div>
                                    {{-- <div class="row">
                                        <div class="col-lg-6 mb-4">
                                            <label class="form-label">Start <span class="text-danger">*</span></label>
                                            <input class="form-control" id="startDate" placeholder="Pick start date ">
                                        </div>
                                        <div class="col-lg-6 mb-4">
                                            <label class="form-label">Due <span class="text-danger">*</span></label>
                                            <input class="form-control" id="dueDate" placeholder="Pick due date">
                                        </div>
                                    </div>
                                    <div class="mb-4">
                                        <label class="form-label">Tags:</label>
                                        <select class="form-select form-control" data-select2-selector="tag" multiple>
                                            <option value="primary" data-bg="bg-primary">Team</option>
                                            <option value="teal" data-bg="bg-teal">Primary</option>
                                            <option value="success" data-bg="bg-success">Updates</option>
                                            <option value="warning" data-bg="bg-warning">Personal</option>
                                            <option value="danger" data-bg="bg-danger">Promotions</option>
                                            <option value="indigo" data-bg="bg-indigo">Customs</option>
                                        </select>
                                    </div>
                                    <div class="mb-0">
                                        <label class="form-label">Assignee:</label>
                                        <select class="form-select form-control" data-select2-selector="user" multiple>
                                            <option value="alex@outlook.com" data-user="1">alex@outlook.com</option>
                                            <option value="john.deo@outlook.com" data-user="2">john.deo@outlook.com</option>
                                            <option value="green.cutte@outlook.com" data-user="3">green.cutte@outlook.com</option>
                                            <option value="nancy.elliot@outlook.com" data-user="4">nancy.elliot@outlook.com</option>
                                            <option value="mar.audrey@gmail.com" data-user="5">mar.audrey@gmail.com</option>
                                            <option value="erna.serpa@outlook.com" data-user="6">erna.serpa@outlook.com</option>
                                            <option value="green.cutte@outlook.com" data-user="7">green.cutte@outlook.com</option>
                                            <option value="nancy.elliot@outlook.com" data-user="8">nancy.elliot@outlook.com</option>
                                            <option value="mar.audrey@gmail.com" data-user="9">mar.audrey@gmail.com</option>
                                            <option value="erna.serpa@outlook.com" data-user="10">erna.serpa@outlook.com</option>
                                            <option value="mar.audrey@gmail.com" data-user="11">mar.audrey@gmail.com</option>
                                            <option value="erna.serpa@outlook.com" data-user="12">erna.serpa@outlook.com</option>
                                        </select>
                                    </div> --}}
                                </div>
                                 
                            </form>
                        </div>
                    </div>
                    {{-- <div class="col-xl-6">
                        <div class="card stretch stretch-full">
                            <div class="card-body">
                                <div class="mb-4">
                                    <label class="form-label">To <span class="text-danger">*</span></label>
                                    <select class="form-select form-control" data-select2-selector="user">
                                        <option value="alex@outlook.com" data-user="1">alex@outlook.com</option>
                                        <option value="john.deo@outlook.com" data-user="2">john.deo@outlook.com</option>
                                        <option value="green.cutte@outlook.com" data-user="3">green.cutte@outlook.com</option>
                                        <option value="nancy.elliot@outlook.com" data-user="4">nancy.elliot@outlook.com</option>
                                        <option value="mar.audrey@gmail.com" data-user="5">mar.audrey@gmail.com</option>
                                        <option value="erna.serpa@outlook.com" data-user="6">erna.serpa@outlook.com</option>
                                        <option value="green.cutte@outlook.com" data-user="7">green.cutte@outlook.com</option>
                                        <option value="nancy.elliot@outlook.com" data-user="8">nancy.elliot@outlook.com</option>
                                        <option value="mar.audrey@gmail.com" data-user="9">mar.audrey@gmail.com</option>
                                        <option value="erna.serpa@outlook.com" data-user="10">erna.serpa@outlook.com</option>
                                        <option value="mar.audrey@gmail.com" data-user="11">mar.audrey@gmail.com</option>
                                        <option value="erna.serpa@outlook.com" data-user="12">erna.serpa@outlook.com</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="form-label">Address <span class="text-danger">*</span></label>
                                    <div class="row">
                                        <div class="col-lg-6 mb-4">
                                            <input type="text" class="form-control mb-2" placeholder="Address Line 1">
                                        </div>
                                        <div class="col-lg-6 mb-4">
                                            <input type="text" class="form-control" placeholder="Address Line 2">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-6 mb-4">
                                        <label class="form-label">Email <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" placeholder="Emial">
                                    </div>
                                    <div class="col-lg-6 mb-4">
                                        <label class="form-label">Phone <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" placeholder="Phone">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-6 mb-4">
                                        <label class="form-label">City </label>
                                        <select class="form-control" data-select2-selector="city">
                                            <option data-city="bg-primary">Akutan</option>
                                            <option data-city="bg-secondary">Aleutians East Borough</option>
                                            <option data-city="bg-success">Aleutians West Census Area</option>
                                            <option data-city="bg-warning">Anchor Point</option>
                                            <option data-city="bg-info">Anchorage</option>
                                            <option data-city="bg-danger">Anchorage Municipality</option>
                                            <option data-city="bg-dark">Badger</option>
                                            <option data-city="bg-black">Barrow</option>
                                            <option data-city="bg-muted">Bear Creek</option>
                                            <option data-city="bg-blue">Bethel</option>
                                            <option data-city="bg-teal">Bethel Census Area</option>
                                            <option data-city="bg-cyan">Big Lake</option>
                                            <option data-city="bg-indigo">Bristol Bay Borough</option>
                                            <option data-city="bg-green">Butte</option>
                                            <option data-city="bg-red">Chevak</option>
                                            <option data-city="bg-orange">City and Borough of Wrangell</option>
                                            <option data-city="bg-darken">Cohoe</option>
                                            <option data-city="bg-primary">College</option>
                                            <option data-city="bg-warning">Cordova</option>
                                            <option data-city="bg-danger">Craig</option>
                                            <option data-city="bg-red">Deltana</option>
                                            <option data-city="bg-green">Denali Borough</option>
                                            <option data-city="bg-orange">Diamond Ridge</option>
                                            <option data-city="bg-muted">Dillingham</option>
                                            <option data-city="bg-teal">Dillingham Census Area</option>
                                            <option data-city="bg-info">Dutch Harbor</option>
                                            <option data-city="bg-indigo">Eagle River</option>
                                            <option data-city="bg-cyan">Eielson Air Force Base</option>
                                            <option data-city="bg-orange">Elmendorf Air Force Base</option>
                                            <option data-city="bg-black">Ester</option>
                                            <option data-city="bg-warning">Fairbanks</option>
                                            <option data-city="bg-green">Fairbanks North Star Borough</option>
                                            <option data-city="bg-indigo">Farm Loop</option>
                                            <option data-city="bg-danger">Farmers Loop</option>
                                            <option data-city="bg-success">Fishhook</option>
                                            <option data-city="bg-teal">Fritz Creek</option>
                                            <option data-city="bg-cyan">Gateway</option>
                                            <option data-city="bg-black">Girdwood</option>
                                            <option data-city="bg-warning">Haines</option>
                                            <option data-city="bg-green">Haines Borough</option>
                                            <option data-city="bg-indigo">Healy</option>
                                            <option data-city="bg-danger">Homer</option>
                                            <option data-city="bg-success">Hoonah-Angoon Census Area</option>
                                            <option data-city="bg-teal">Hooper Bay</option>
                                            <option data-city="bg-cyan">Houston</option>
                                            <option data-city="bg-warning">Juneau</option>
                                            <option data-city="bg-black">Kalifornsky</option>
                                            <option data-city="bg-green">Kenai</option>
                                            <option data-city="bg-danger">Kenai Peninsula Borough</option>
                                            <option data-city="bg-success">Ketchikan</option>
                                            <option data-city="bg-indigo">Ketchikan Gateway Borough</option>
                                            <option data-city="bg-teal">King Cove</option>
                                            <option data-city="bg-black">Knik-Fairview</option>
                                            <option data-city="bg-green">Kodiak</option>
                                            <option data-city="bg-cyan">Kodiak Island Borough</option>
                                            <option data-city="bg-warning">Kodiak Station</option>
                                            <option data-city="bg-darken">Kotzebue</option>
                                        </select>
                                    </div>
                                </div>
                                <hr class="my-5">
                                <hr class="my-5">
                                <div class="row mb-4">
                                    <div class="form-check form-switch form-switch-sm ps-5">
                                        <input class="form-check-input c-pointer" type="checkbox" id="commentSwitch">
                                        <label class="form-check-label fw-500 text-dark c-pointer" for="commentSwitch">Allow Comments</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div> --}}
                    {{-- <div class="col-12">
                        <div class="card stretch stretch-full">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-lg-8">
                                        <div class="mb-4">
                                            <h5 class="fw-bold">Add Items:</h5>
                                            <span class="fs-12 text-muted">Add items to proposal</span>
                                        </div>
                                        <div class="table-responsive">
                                            <table class="table table-bordered overflow-hidden" id="tab_logic">
                                                <thead>
                                                    <tr class="single-item">
                                                        <th class="text-center">#</th>
                                                        <th class="text-center wd-450">Product</th>
                                                        <th class="text-center wd-150">Qty</th>
                                                        <th class="text-center wd-150">Price</th>
                                                        <th class="text-center wd-150">Total</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr id="addr0">
                                                        <td>1</td>
                                                        <td><input type="text" name="product[]" placeholder="Product Name" class="form-control"></td>
                                                        <td><input type="number" name="qty[]" placeholder="Qty" class="form-control qty" step="1" min="1"></td>
                                                        <td><input type="number" name="price[]" placeholder="Unit Price" class="form-control price" step="1.00"></td>
                                                        <td><input type="number" name="total[]" placeholder="0.00" class="form-control total" readonly=""></td>
                                                    </tr>
                                                    <tr id="addr1">
                                                        <td>3</td>
                                                        <td></td>
                                                        <td></td>
                                                        <td></td>
                                                        <td></td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="d-flex justify-content-end gap-2 mt-3">
                                            <button id="delete_row" class="btn btn-md bg-soft-danger text-danger">Delete</button>
                                            <button id="add_row" class="btn btn-md btn-primary">Add Items</button>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="mb-4">
                                            <h5 class="fw-bold">Grand Total:</h5>
                                            <span class="fs-12 text-muted">Grand total proposal</span>
                                        </div>
                                        <div class="table-responsive">
                                            <table class="table table-bordered" id="tab_logic_total">
                                                <tbody>
                                                    <tr class="single-item">
                                                        <th class="fs-10 text-dark text-uppercase">Sub Total</th>
                                                        <td class="w-25"><input type="number" name="sub_total" placeholder="0.00" class="form-control border-0 bg-transparent p-0" id="sub_total" readonly=""></td>
                                                    </tr>
                                                    <tr class="single-item">
                                                        <th class="fs-10 text-dark text-uppercase">Tax</th>
                                                        <td class="w-25">
                                                            <div class="input-group mb-2 mb-sm-0">
                                                                <input type="number" class="form-control border-0 bg-transparent p-0" id="tax" placeholder="0">
                                                                <div class="input-group-addon">%</div>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr class="single-item">
                                                        <th class="fs-10 text-dark text-uppercase">Tax Amount</th>
                                                        <td class="w-25"><input type="number" name="tax_amount" id="tax_amount" placeholder="0.00" class="form-control border-0 bg-transparent p-0" readonly=""></td>
                                                    </tr>
                                                    <tr class="single-item">
                                                        <th class="fs-10 text-dark text-uppercase bg-gray-100">Grand Total</th>
                                                        <td class="bg-gray-100 w-25"><input type="number" name="total_amount" id="total_amount" placeholder="0.00" class="form-control border-0 bg-transparent p-0 fw-700 text-dark" readonly=""></td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div> --}}
                </div>
            </div>
            <!-- [ Main Content ] end -->

            @include('admin.includes.footer')

<script>
    $('input[name="code"]').on('input', function() {
        this.value = this.value.toUpperCase().trim();
    })
    $('select[name="type"]').on('change', function() {
        $('input[name="percentage"]').val('');
        if (this.value == 1) {
            $('#percentage').removeClass('d-none');
            $('input[name="percentage"]').prop('required', true);
        } else {
            $('#percentage').addClass('d-none');
            $('input[name="percentage"]').prop('required', false);
        }
    })
</script>