@extends('layouts.master')

@section('title')
Edit plan
@endsection

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

    <!-- PAGE-HEADER Breadcrumbs-->
    <div class="page-header">
        <h1 class="page-title">Plan edit</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')}}">Plan list</a></li>
                <li class="breadcrumb-item active" aria-current="page">Plan edit</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="update_plan">
                        @csrf
                        <input type="hidden" name="id" id="{{$plans->id}}" value="{{$plans->id}}">
                        <div class=" row mb-4">
                            <label class="col-lg-2 form-label">Status: <span
                                    class="text-danger">*</span></label>
                            <div class="col-lg-10">
                                <select class="form-control form-select"  name="status">
                                    <option selected disabled>choose user type</option>
                                    <option value="1" {{$plans->status == '1' ? 'selected' :''}}>Active</option>
                                    <option value="2" {{$plans->status == '2' ? 'selected' :''}}>Decline </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">
                                <select class="form-control form-select" required name="user_type">
                                    <option selected disabled>choose user type</option>
                                    <option value="1" {{$plans->user_type == '1' ? 'selected' :''}}>Retail</option>
                                    <option value="2" {{$plans->user_type == '2' ? 'selected' :''}}>Commercial
                                    </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" id="name" value="{{$plans->name}}">
                            </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"
                                    value="{{$plans->total_vehicles}}">
                            </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"
                                    value="{{$plans->price}}">
                            </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"
                                    value="{{$plans->count}}">
                            </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" 
                                    value="{{$plans->ex_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" 
                                value="{{$plans->es_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) {
        // update vehicle
        $("#update_plan").on('submit', (function (e) {
            e.preventDefault();
            $.ajax({
                url: '/api/update/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"])
                        // $("#update_user")[0].reset();
                    }
                },
                error: function (error) {
                    console.log(error);
                }
            });
        }));
    });

</script>
@endsection