@extends('layouts.app')
@section('main-content')
<style>
    input[type=text]:focus,
    input[type=email]:focus {
        box-shadow: none;
    }

    textarea {
        box-shadow: none;
        resize: none;
        width: 100%;
        height: 80px;
    }
</style>
<div class="container-fluid p-0">
    <nav class="page-breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Home</a></li>
            <li class="breadcrumb-item"><a href="{{ route('customers') }}">Customers List</a></li>
            <li class="breadcrumb-item">Edit Customer</li>
        </ol>
    </nav>
    <h1 class="h3 mb-3"><strong>Edit</strong> Customer</h1>

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between pb-2 mb-0">
                    <h5 class="card-title mb-0">Edit Customer</h5>
                    <a href="{{ route('customers.create') }}" class="btn btn-primary btn-sm">
                        <i class="align-middle" data-feather="plus"></i> <span class="align-middle">Add Customer</span>
                    </a>
                </div>
                <div class="card-body">
                    @if ($errors->any())
                    <div class="alert alert-danger p-2 pb-0">
                        <ul class="list-unstyled">
                            @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                    @endif
                    <form id="forms-category" method="POST" action="{{ route('customers.update', $customer->id) }}">
                        @csrf
                        @method('patch')
                        <div class="row mb-3">
                            <label for="name" class="col-sm-3 col-form-label">Customer Type</label>
                            <div class="col-sm-9">
                                <select name="customertype" id="cboType" class="form-control form-control-sm cboType shadow-none">
                                    <option value="">Choose Customer Type</option>
                                    <option value="I" @if ($customer->customertype == 'I') ? selected @endif>Personal</option>
                                    <option value="B" @if ($customer->customertype == 'B') ? selected @endif>Business</option>
                                </select>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label for="name" class="col-sm-3 col-form-label">Name</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="name" name="name" placeholder="Customer Name" required autofocus autocomplete="off" value="{{ $customer->name }}" autocapitalize="characters">
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label for="contact" class="col-sm-3 col-form-label">Contact</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="contact" name="contact" placeholder="Contact Number" required autofocus autocomplete="off" value="{{ $customer->contact }}" autocapitalize="characters">
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label for="model" class="col-sm-3 col-form-label">Model</label>
                            <div class="col-sm-9">
                                <select name="model" id="model" class="form-control form-control-sm" required>
                                    <option value="">Select or Create</option>
                                    @forelse($models as $model)
                                    <option value="{{ $model->models }}" selected>{{ $model->models }}</option>
                                    @empty
                                    @endforelse
                                </select>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label for="info" class="col-sm-3 col-form-label">Reg. Number</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="info" name="info" placeholder="Vehicle Number" required autofocus autocomplete="off" value="{{ $customer->info }}" autocapitalize="characters">
                            </div>
                        </div>
                        <div class="businessdiv"></div>
                        @if($customer->customertype == 'B')
                        <div class="row mb-3 divCompany"><label for="companyname" class="col-sm-3 col-form-label">Company Name</label>
                            <div class="col-sm-9"><input type="text" class="form-control" id="companyname" name="companyname" value="{{ $customer->companyname }}" placeholder="Company Name" required autocomplete="off" autocapitalize="characters"></div>
                        </div>
                        <div class="row mb-3 divCompany"><label for="email" class="col-sm-3 col-form-label">Company Email</label>
                            <div class="col-sm-9"><input type="email" class="form-control" id="email" name="email" value="{{ $customer->email }}" placeholder="Email" required autocomplete="off" autocapitalize="characters"></div>
                        </div>
                        <div class="row mb-3 divCompany"><label for="address" class="col-sm-3 col-form-label">Company Address</label>
                            <div class="col-sm-9"><textarea type="text" class="form-control form-control-sm" id="address" name="address" placeholder="Company Address" autocomplete="off" autocapitalize="characters">{{{ $customer->address }}}</textarea></div>
                        </div>
                        @endif
                        <div class="row mb-3">
                            <div class="col-sm-3 offset-sm-3">
                                <button type="submit" class="btn btn-primary me-2">
                                    <i class="align-middle" data-feather="save"></i><span class="align-middle"> Submit</span>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

</div>
@endsection
@section('script')
<script type="text/javascript">
    const Options = $(".cboType");
    const divOption = $(".businessdiv");

    $(document).ready(function() {
        $("#model").select2({
            tags: true
        });
        $(document).on('change', '.cboType', function(e) {
            if (Options.val() == 'I') {
                $(".divCompany").remove();
            } else {
                divOption.append('<div class="row mb-3 divCompany"><label for="companyname" class="col-sm-3 col-form-label">Company Name</label><div class="col-sm-9"><input type="text" class="form-control" id="companyname" name="companyname" value="" placeholder="Company Name" required  autocomplete="off" autocapitalize="characters"></div></div>');
                divOption.append('<div class="row mb-3 divCompany"><label for="email" class="col-sm-3 col-form-label">Company Email</label><div class="col-sm-9"><input type="email" class="form-control" id="email" name="email" value="" placeholder="Email" required  autocomplete="off" autocapitalize="characters"></div></div>');
                divOption.append('<div class="row mb-3 divCompany"><label for="address" class="col-sm-3 col-form-label">Company Address</label><div class="col-sm-9"><textarea type="text" class="form-control" id="address" name="address" placeholder="Company Address" required autocomplete="off" autocapitalize="characters"></textarea></div>');
            }
        });
    });
</script>
@endsection