@extends('layouts.app')
@section('main-content')
<style>
    .wizard-card .picture-container {
        position: relative;
        cursor: pointer;
        text-align: center;
    }

    .wizard-card .picture {
        width: 106px;
        height: 106px;
        background-color: #999999;
        border: 4px solid #CCCCCC;
        color: #FFFFFF;
        border-radius: 50%;
        margin: 5px auto;
        overflow: hidden;
        transition: all 0.2s;
        -webkit-transition: all 0.2s;
    }

    .wizard-card .picture input[type="file"] {
        cursor: pointer;
        display: block;
        height: 100%;
        left: 0;
        opacity: 0 !important;
        position: absolute;
        top: 0;
        width: 100%;
    }

    .wizard-card .picture-src {
        width: 100%;
    }
</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('companies') }}">Company List</a></li>
            <li class="breadcrumb-item">Setup Company</li>
        </ol>
    </nav>
    <h1 class="h3 mb-3"><strong>Add</strong> Company</h1>
    <div class="row">
        <div class="col-12">
            <div class="card wizard-card ">
                <div class="card-header">
                    <h5 class="card-title mb-0">New Company Profile</h5>
                </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-company" method="post" action="{{ route('companies.store') }}" enctype="multipart/form-data">
                        @csrf
                        <div class="row mb-3">
                            <div class="col-sm-3">
                                <div class="picture-container pt-4">
                                    <div class="picture">
                                        <img src="{{ (!empty($product->photo)) ? url('assets/upload/images/companies/'.$product->filename) : asset('assets/img/no-image.png') }}" alt="Company picture" class="picture-src" id="show-image" />
                                        <input type="file" id="photo" name="photo" required>
                                    </div>
                                    <h6>Choose Picture</h6>
                                </div>
                            </div>
                            <div class="col-sm-9">
                                <div class="form-group">
                                    <label for="name" class="col-sm-3 col-form-label">Company Name</label>
                                    <input type="text" class="form-control" id="name" name="name" placeholder="Company Name" required autofocus autocomplete="off" value="{{ old('name') }}" autocapitalize="characters">
                                </div>
                                <div class="form-group">
                                    <label for="ssm" class="col-sm-4 col-form-label">Company Number</label>
                                    <input type="text" class="form-control" id="ssm" name="ssm" placeholder="100000-A" required autocomplete="off" maxlength="12" value="{{ old('ssm') }}" autocapitalize="characters">
                                </div>
                                <!-- TAX -->
                                <div class="form-group">
                                    <label for="gst" class="col-sm-4 col-form-label">GST Reg Number</label>
                                    <input type="text" class="form-control" id="gst" name="gst" placeholder="100100/2024" autocomplete="off" maxlength="15" value="{{ old('gst') }}" autocapitalize="characters">
                                </div>
                                <div class="form-group">
                                    <label for="sst" class="col-sm-4 col-form-label">SST Reg Number</label>
                                    <input type="text" class="form-control" id="sst" name="sst" placeholder="W88888888888888" autocomplete="off" maxlength="15" value="{{ old('sst') }}" autocapitalize="characters">
                                </div>
                                <!-- TAX -->
                            </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" maxlength="12" placeholder="Contact" required autocomplete="off" value="{{ old('contact') }}" autocapitalize="characters">
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label for="email" class="col-sm-3 col-form-label">Email</label>
                            <div class="col-sm-9">
                                <input type="email" class="form-control" id="email" name="email" maxlength="50" placeholder="Email" autocomplete="off" value="{{ old('email') }}" autocapitalize="characters">
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label for="name" class="col-sm-3 col-form-label">Address</label>
                            <div class="col-sm-9">
                                <textarea name="address" id="address" class="form-control" cols="30" rows="3" value="{{ old('address') }}" required></textarea>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label for="account" class="col-sm-3 col-form-label">Bank Name</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="account" name="account" maxlength="50" placeholder="Bank Name" required autocomplete="off" value="{{ old('account') }}" autocapitalize="characters">
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label for="accountno" class="col-sm-3 col-form-label">Account No</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="accountno" name="accountno" maxlength="15" placeholder="Account Number" required autocomplete="off" value="{{ old('accountno') }}" autocapitalize="characters">
                            </div>
                        </div>
                        <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">
    $(document).ready(function() {
        $('#photo').change(function(e) {
            var reader = new FileReader();
            reader.onload = function(e) {
                $('#show-image').attr('src', e.target.result);
            }
            reader.readAsDataURL(e.target.files['0']);
        });
    })
</script>
@endsection