@extends('layouts.admin')
@section('content')
<div class="page-wrapper">
    <div class="content container-fluid">
        <div class="page-header">
            <div class="row align-items-center">
                <div class="col">
                    <h3 class="page-title">{{trans('cruds.fuel.title_singular')}}</h3>
                    <ul class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{route('admin.home')}}">{{trans('global.dashboard') }}</a></li>
                        <li class="breadcrumb-item"><a href="{{route('admin.fuel-infos.index')}}">{{trans('cruds.fuelInfo.title') }}</a></li>
                        <li class="breadcrumb-item active">{{trans('global.add')}}</li>
                    </ul>
                </div>
                <div class="col-auto float-right ml-auto">
                    <a href="{{ route('admin.fuel-infos.index') }}" class="btn add-btn"> <i class="la la-arrow-left"></i>{{ trans('global.back') }}</a>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header">
                {{ trans('global.add') }} {{ trans('cruds.fuelInfo.title') }}
            </div>

            <div class="card-body">
                <form method="POST" id="fuel_info_form" action="{{ route("admin.fuel-infos.store") }}" enctype="multipart/form-data">
                    @csrf
                    <div class="row">
                        <table class="table table-bordered" id="field_container">
                            <tr>
                                <th>{{trans('cruds.fuelInfo.branch')}} </th>
                                <th>{{trans('cruds.fuelInfo.fuel_name')}} </th>
                                <th>{{trans('cruds.fuelInfo.cost_price')}} </th>
                                <th>{{trans('cruds.fuelInfo.selling_price')}} </th>
                                <th>{{trans('cruds.fuelInfo.eff_from')}} </th>
                                <th>{{trans('cruds.fuelInfo.status')}} </th>
                                <th></th>
                            </tr>
                            <tr id="copy_content" class="fuel_block">
                                <td>
                                    <select name="branch[0]" class="form-control fetch_fuels" id="branch">
                                        @foreach ($branches as $key => $branch)
                                            <option value="{{$key}}">{{$branch}}</option>
                                        @endforeach
                                    </select>
                                </td>
                                <td>
                                    <select name="fuel[0]" class="form-control fill_fuel" id="fuel">
                                        @foreach ($fuels as $key => $fuel)
                                            <option value="{{$key}}">{{$fuel}}</option>
                                        @endforeach
                                    </select>
                                </td>
                                <td>
                                    <input type="number" step="any" name="cost_price[0]" id="cost_price" class="form-control">
                                </td>
                                <td>
                                    <input type="number" step="any" name="selling_price[0]" id="selling_price" class="form-control">
                                </td>
                                <td>
                                    <input type="date" name="effective_from[0]" id="effective_from" class="form-control">
                                </td>
                                <td>
                                    <input type="checkbox" name="status[0]" id="status" value="1">
                                </td>
                                <td><button class="btn btn-xs btn-danger d-none" id="remove"><i class="fa fa-trash"></i></button></td>
                            </tr>
                        </table>
                    </div>
                    <div class="row my-3">
                        <div class="col-lg-12 text-center">
                            <button class="btn btn-block btn-light" id="add_row">Add Row</button>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="form-group">
                                <button class="btn btn-info" type="reset">
                                    {{ trans('global.reset') }}
                                </button>
                                <button class="btn btn-primary" id="btn_submit" type="submit">
                                    {{ trans('global.save') }}
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@section('scripts')
    <script>
        $(document).ready(function(){
            var max = 15;
           var x=0;

            $('#add_row').click(function (e) {
                e.preventDefault();
                if(x < max)
                {
                    x++;
                    var clone_ele = $('#copy_content').clone();
                    clone_ele.find('#remove').removeClass('d-none');
                    // clone_ele.find('#date').removeClass('is-invalid');
                    clone_ele.find('#branch').each(function(){
                        this.value = "";
                        this.id = this.id + '.' + x;
                        this.name = this.name.replace(/\[[0-9]\]+/, '[' + x + ']');
                    });
                    clone_ele.find('#fuel').each(function(){
                        this.value = "";
                        this.id = this.id + '.' + x;
                        this.name = this.name.replace(/\[[0-9]\]+/, '[' + x + ']');
                    });
                    clone_ele.find('#cost_price').each(function(){
                        this.value = "";
                        this.id = this.id + '.' + x;
                        this.name = this.name.replace(/\[[0-9]\]+/, '[' + x + ']');
                    });
                    clone_ele.find('#selling_price').each(function(){
                        this.value = "";
                        this.id = this.id + '.' + x;
                        this.name = this.name.replace(/\[[0-9]\]+/, '[' + x + ']');
                    });
                    clone_ele.find('#effective_from').each(function(){
                        this.value = "1";
                        this.id = this.id + '.' + x;
                        this.name = this.name.replace(/\[[0-9]\]+/, '[' + x + ']');
                    });
                    clone_ele.find('#status').each(function(){
                        this.id = this.id + '.' + x;
                        this.name = this.name.replace(/\[[0-9]\]+/, '[' + x + ']');
                    });
                    clone_ele.appendTo('#field_container');
                }
            });

            $('#field_container').on('click','#remove',function (e) {
                e.preventDefault();
                $(this).closest('tr').remove();
            });
            $('#btn_submit').click(function (e) {
                e.preventDefault();
                $("#btn_submit").prop('disabled', true);
                var from = $('#fuel_info_form');
                var redirecturl = url + "/admin/fuel-infos";
               $.ajax({
                   type: from.attr('method'),
                   url: from.attr('action'),
                   data: from.serialize(),
                   dataType: "json",
                   success: function (response) {
                    if (response.success) {
                        toastr.success(response.message);
                        $('#fuel_info_form')[0].reset;
                        setTimeout(function(){
                            window.location = redirecturl;
                        }, 1000);
                    }
                    $("#btn_submit").prop('disabled', false);
                   },
                   error: function(response){
                    $('#error').removeClass('d-none');
                    $.each(response.responseJSON.errors, function (index, value) {
                        toastr.error(value);
                        $("#btn_submit").prop('disabled', false);
                    });
                   }
               });

            });
        });
    </script>
@endsection
@endsection