@extends('layouts.master')

@section('title')
Create plan
@endsection

@section('content')
<div class="main-container container-fluid">

    <!-- PAGE-HEADER Breadcrumbs-->
    <div class="page-header">
        <h1 class="page-title">Subscription plan add</h1>
        <div>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{url('/dashboard')}}">Home</a></li>
                <li class="breadcrumb-item"><a href="{{url('/plan/list')}}">Subscription plan list</a></li>
                <li class="breadcrumb-item active" aria-current="page">Subscription plan add</li>
            </ol>
        </div>
    </div>
    <!-- PAGE-HEADER END -->
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <form class="form-horizontal" id="add_plan">
                        @csrf
                        <div class=" row mb-4">
                            <label class="col-lg-2 form-label">User type: <span class="text-danger">*</span></label>
                            <div class="col-lg-10">
                                <select class="form-control form-select" required id="user_type" name="user_type">
                                    <option selected disabled>choose user type</option>
                                    <option value="1">Retail</option>
                                    <option value="2">Comercial</option>
                                </select>
                            </div>
                        </div>
                        <div class=" row mb-4">
                            <label class="col-lg-2 form-label">Plan name: <span class="text-danger">*</span></label>
                            <div class="col-lg-10">
                                <input type="text" class="form-control" name="name" name="name" required
                                    placeholder="Enter plan name">
                            </div>
                        </div>
                        <div class=" row mb-4">
                            <label class="col-lg-2 form-label">Price <small>( per month )</small>: <span
                                    class="text-danger">*</span></label>
                            <div class="col-lg-10">
                                <input type="number" class="form-control" name="price" id="price" required
                                    placeholder="Enter price">
                            </div>
                        </div>
                        <div class=" row mb-4">
                            <label class="col-lg-2 form-label">Total number of vehicle: <span
                                    class="text-danger">*</span></label>
                            <div class="col-lg-10">
                                <input type="number" class="form-control" name="total_vehicles" id="total_vehicles"
                                    required placeholder="Enter total number of vehicle">
                            </div>
                        </div>
                        
                        <div class=" row mb-4">
                            <label class="col-lg-2 form-label">Total violations: <span class="text-danger">*</span></label>
                            <div class="col-lg-10">
                                <input type="number" class="form-control" name="count" id="count" required
                                    placeholder="Enter number of violations">
                            </div>
                        </div>
                        <div class=" row mb-4">
                            <label class="col-lg-2 form-label">Extra violations charges: </label>
                            <div class="col-lg-10">
                                <input type="number" class="form-control" name="ex_charges" id="ex_charges" required
                                    placeholder="Enter extraviolation charges">
                            </div>
                        </div>

                        <div class=" row mb-4">
                            <label class="col-lg-2 form-label">Extra service charges:</label>
                            <div class="col-lg-10">
                                <input type="number" class="form-control" name="es_charges" id="es_charges" required
                                    placeholder="Enter service charges">
                            </div>
                        </div>
                        <div class="text-end">
                            <button type="submit" class="btn btn-buzono btnSubmit" id="btnSubmit"> <i
                                    class="fa fa-spinner fa-pulse" style="display: none;"></i>
                                Save</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('bottom-script')
<script>
    $(document).ready(function (e) {
        // add plan
        $("#add_plan").on('submit', (function (e) {
            e.preventDefault();
            $.ajax({
                url: '/api/add/plan',
                type: "POST",
                data: new FormData(this),
                dataType: "JSON",
                processData: false,
                contentType: false,
                cache: false,
                beforeSend: function () {
                    $("#btnSubmit").attr('disabled', true);
                    $(".fa-pulse").css('display', 'inline-block');
                },
                complete: function () {
                    $("#btnSubmit").attr('disabled', false);
                    $(".fa-pulse").css('display', 'none');
                },
                success: function (response) {
                    console.log(response);
                    if (response["status"] == "fail") {
                        toastr.error('Failed', response["msg"])
                    } else if (response["status"] == "success") {
                        toastr.success('Success', response["msg"])
                        $("#add_plan")[0].reset();
                    }
                },
                error: function (error) {
                    console.log(error);
                }
            });
        }));
    });

</script>
@endsection