@extends('layouts.admin')
@section('content')

<style type="text/css">
  #imagePreview {
    width: 180px;
    height: 180px;
    background-position: center center;
    background-size: cover;
    -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .3);
    display: inline-block;
}
</style>

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>New Service Providers</h5>
                </div>
                <div class="ibox-content">
                    <form method="post" action="{{url('service-providers/create')}}" enctype="multipart/form-data">
                        @csrf
                        <div class="form-group  row">
                            <label class="col-sm-2 col-form-label">First Name</label>
                            <div class="col-sm-10">
                                <input type="text" name="first_name" required class="form-control"
                                    value="{{old('first_name')}}">
                            </div>
                        </div>
                        <div class="form-group  row">
                            <label class="col-sm-2 col-form-label">Last Name</label>
                            <div class="col-sm-10">
                                <input type="text" name="last_name" required class="form-control"
                                    value="{{old('last_name')}}">
                            </div>
                        </div>
                        <div class="form-group  row">
                            <label class="col-sm-2 col-form-label">Email</label>
                            <div class="col-sm-10">
                                <input type="email" name="email" required class="form-control" value="{{old('email')}}">
                            </div>
                        </div>
                        <div class="form-group  row">
                            <label class="col-sm-2 col-form-label">Phone</label>
                            <div class="col-sm-10">
                                <input type="text" name="phone" required class="form-control" value="{{old('phone')}}">
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <h3>Organization Details</h3>
                        <div class="form-group  row">
                            <label class="col-sm-2 col-form-label">Logo</label>
                            <div class="col-sm-10">
                                <input type="file" id="uploadFile" name="logo">
                            </div>
                            <label class="col-sm-2 col-form-label"></label>
                            <div id="imagePreview"></div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group  row">
                            <label class="col-sm-2 col-form-label">Organization Name</label>
                            <div class="col-sm-10">
                                <input type="text" name="org_name" required class="form-control"
                                    value="{{old('org_name')}}">
                            </div>
                        </div>
                        <div class="form-group  row">
                            <label class="col-sm-2 col-form-label">Email</label>
                            <div class="col-sm-10">
                                <input type="email" name="org_email" required class="form-control" value="{{old('org_email')}}">
                            </div>
                        </div>
                        <div class="form-group  row">
                            <label class="col-sm-2 col-form-label">Phone</label>
                            <div class="col-sm-10">
                                <input type="text" name="org_phone" required class="form-control" value="{{old('org_phone')}}">
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group  row">
                            <label class="col-sm-2 col-form-label">Address</label>
                            <div class="col-sm-10">
                                <input type="text" name="org_address" class="form-control" value="{{old('org_address')}}">
                            </div>
                        </div>
                        <div class="form-group  row">
                            <label class="col-sm-2 col-form-label">Location</label>
                            <div class="col-sm-10">
                                <input type="text" name="org_location" class="form-control" value="{{old('org_location')}}">
                            </div>
                        </div>
                        <div class="form-group  row">
                            <label class="col-sm-2 col-form-label">KRA PIN</label>
                            <div class="col-sm-10">
                                <input type="text" name="org_kra_pin" class="form-control" value="{{old('org_kra_pin')}}">
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <h3>Organization Documents</h3>
                        <div class="form-group  row">
                            <label class="col-sm-2 col-form-label">Driving Licence</label>
                            <div class="col-sm-10">
                                <input type="file" name="licence">
                            </div>
                        </div>
                        <div class="form-group  row">
                            <label class="col-sm-2 col-form-label">ID Front</label>
                            <div class="col-sm-10">
                                <input type="file" name="id_front">
                            </div>
                        </div>
                        <div class="form-group  row">
                            <label class="col-sm-2 col-form-label">ID Back</label>
                            <div class="col-sm-10">
                                <input type="file" name="id_back">
                            </div>
                        </div>
                        <div class="form-group  row">
                            <label class="col-sm-2 col-form-label">Passport</label>
                            <div class="col-sm-10">
                                <input type="file" name="passport">
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <h3>Services</h3>
                        <div class="input_fields_wrap">
                            <div>
                                <div class="form-group  row">
                                    <label class="col-sm-2 col-form-label">Select Category</label>
                                    <div class="col-sm-10">
                                        <select name="category[]" required class="form-control m-b select2_demo_3 category"
                                            data-placeholder="Choose Category">
                                            <option value="">Select Category</option>
                                            @foreach($categories as $category)
                                            <option value="{{$category->id}}">{{$category->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group row vehicles">
                                    <label class="col-sm-2 col-form-label">Vehicle</label>
                                    <div class="col-sm-10">
                                        <input type="text" name="vehicle[]" class="form-control">
                                    </div>
                                </div>
                                <div class="form-group row litres">
                                    <label class="col-sm-2 col-form-label">Fuel Type</label>
                                    <div class="col-sm-10">
                                        <input type="text" name="litres[]" class="form-control">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-2 col-form-label">Amount</label>
                                    <div class="col-sm-10">
                                        <input type="text" required name="amount[]" class="form-control">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <button class="add_field_button btn btn-success">Add More Services</button>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group row">
                            <div class="col-sm-4 col-sm-offset-2">
                                <a href="{{url('service-providers')}}" class="btn btn-white btn-sm">Cancel</a>
                                <button class="btn btn-primary btn-sm" type="submit">Save changes</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection