@extends('includes/layout')
@section('main-page-content')
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="card mb-4 ">
            <div class="border-bottom p-3">
                <div class="h4 pb-0 mb-0 ">Tier Packages</div>
                <small>Dashboard-Tier Management-Tier Packages</small>
            </div>
            <form id="tier-package-form">
                <div class="row p-3">
                    <div class="col-6 ">
                        <div class="mb-3">
                            <label>Tier Name<span class="text-danger">*</span></label>
                            <select class="form-select" aria-label="Default select example" name="tier_id">
                                <option selected>--select--</option>
                                @foreach ($tiers as $tier)
                                    <option value="{{ $tier->id }}">{{ $tier->title }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    {{-- <div class="col-6">
                        <div class="mb-3">
                            <label>Allowances<span class="text-danger">*</span></label>
                            <select class="form-select" aria-label="Default select example" name="allowance_package_id">
                                <option selected>--select--</option>
                                <option value="1">One</option>
                                <option value="2">Two</option>
                                <option value="3">Three</option>
                            </select>
                        </div>
                    </div> --}}
                    <div class="col-6 d-none">
                        <div class="mb-3">
                            <label>Project Allowances</label>
                            <select class="form-select" aria-label="Default select example">
                                <option selected>--select--</option>
                                <option value="1">One</option>
                                <option value="2">Two</option>
                                <option value="3">Three</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="border-top p-3 d-flex justify-content-end">
                    <button type="button" class="btn btn-outline-light text-dark me-2"  onclick="window.location='{{ url('/') }}/tier-package'">CANCEl</button>
                    <button type="button" class="btn btn-primary waves-effect" onclick="tier_package_store();">SAVE</button>
                </div>
            </form>
        </div>
    </div>
@endsection
@section('css-js')
    <script>
$(document).ready(function() {
    $('#clearButton').click(function() {
        $('#tier-package-form')[0].reset();
    });

});
function tier_package_store()
{
    var formData = new FormData($('#tier-package-form')[0]);

    $.ajax({
        url: "{{ url('api/tier-package-store') }}",
        type: 'POST',
        data: formData,
        dataType: 'json',
        processData: false,
        contentType: false,
        headers: {
            'X-CSRF-TOKEN': '{{csrf_token()}}'
        },
        success: function(response) {
            window.location.href = "{{ url('/') }}/tier-package";
        },
        error: function(response) {
            if (response.status == 500) {
                toastr.error("Something went wrong")
            }
            else
            {
                toastr.error(response.responseJSON.message)
            }
        }
    });
}

    </script>
@endsection