@extends('fragments.public.publicInternationalFullTemplate')
@section('titulo')
    Create User Account
@endsection
@section('contenido')
    <link rel="stylesheet" type="text/css"
        href={{ url('assets/css/international_customers_portal/create_user_account.css') }}>
    <div class="container col-lg-12">
        <br><br><br><br><br>
        <div class="content">
            <div class="col-lg-12 col-md-12 col-sm-12">
                @if (session()->has('success'))
                    <div class="alert alert-success text-center alert-dismissible" role="alert">
                        <strong>{{ session()->get('success') }}</strong>
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    </div>
                @endif
                @if (session()->has('warning'))
                    <div class="alert alert-warning text-center alert-dismissible" role="alert">
                        <strong>{{ session()->get('warning') }}</strong>
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    </div>
                @endif
                @if (session()->has('error'))
                    <div class="alert alert-danger text-center alert-dismissible" role="alert">
                        <strong>{{ session()->get('error') }}</strong>
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    </div>
                @endif
                @if (count($errors) > 0)
                    <div class="alert alert-danger alert-dismissible" role="alert">
                        <strong>¡Error!</strong> Revise los campos obligatorios.<br><br>
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
            </div>
        </div>
        <div class="multisteps-form">
            <!--progress bar-->
            <div class="row">
                <div class="col-12 col-lg-8 ml-auto mr-auto mb-4">
                    <div class="multisteps-form__progress">
                        <button class="multisteps-form__progress-btn js-active" type="button"
                            title="EMPRESA INFORME">COMPANY REPORT</button>
                        <button class="multisteps-form__progress-btn" type="button" title="EMPRESA FACTURACIÓN">COMPANY
                            INVOICING</button>
                        <button class="multisteps-form__progress-btn" type="button" title="CONTACTO">CONTACT</button>
                        {{-- <button class="multisteps-form__progress-btn" type="button" title="Comments">Comments</button> --}}
                    </div>
                </div>
            </div>
            <!--form panels-->
            <div class="row">
                <div class="col-12 col-lg-8 m-auto">
                    <form id="create_account_customer_portal" class="multisteps-form__form"
                        action="{{ route('request_international_user_store') }}" method="post" role="form"
                        enctype="multipart/form-data">
                        <!--single form panel-->
                        {{ csrf_field() }}
                        <div class="multisteps-form__panel shadow p-4 rounded bg-white js-active" data-animation="scaleIn">
                            <h3 class="multisteps-form__title">COMPANY DATA FOR THE REPORT</h3>
                            <div class="multisteps-form__content">
                                <div class="form-row">

                                    <div class="form-group required col-md-12 text-left">
                                        <label class="font-weight-bold control-label" for="company_name_report">Company
                                            name</label>
                                        <input type="text" class="form-control" id="company_name_report"
                                            name="company_name_report" placeholder="Company name" {{-- required --}}>
                                    </div>
                                    <label class="font-weight-bold text-center col-md-12"
                                        style="margin-bottom:10px;">ADDRESS INFORMATION</label>

                                    <div class="form-group col-md-12">
                                        <div class="form-row">
                                            <div class="form-group required col-md-4">
                                                <label class="font-weight-bold control-label"
                                                    for="id_country_report">Country</label>
                                                <select class="selectpicker form-control" id="id_country_report"
                                                    name="id_country_report" data-live-search="true" {{-- required --}}>
                                                    <option selected disabled>--Select--</option>
                                                    @foreach ($countries as $countrie)
                                                        <option value="{{ $countrie->id_country }}">{{ $countrie->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="form-group col-md-4 required">
                                                <label class="font-weight-bold control-label" for="zip_code_report">Zip
                                                    code</label>
                                                <input type="text" class="form-control" placeholder="Zip code"
                                                    id="zip_code_report" name="zip_code_report">
                                            </div>
                                            <div class="form-group col-md-4 required">
                                                <label class="font-weight-bold control-label"
                                                    for="state_report">State</label>
                                                <input type="text" class="form-control" placeholder="State"
                                                    id="state_report" name="state_report">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group col-md-12">
                                        <div class="form-row">
                                            <div class="form-group col-md-4 required">
                                                <label class="font-weight-bold control-label" for="city_report">City</label>
                                                <input type="text" class="form-control" placeholder="City"
                                                    id="city_report" name="city_report">
                                            </div>
                                            <div class="form-group col-md-4">
                                                <label class="font-weight-bold"
                                                    for="municipality_report">Municipality</label>
                                                <input type="text" class="form-control" placeholder="Municipality"
                                                    id="municipality_report" name="municipality_report">
                                            </div>
                                            <div class="form-group col-md-4">
                                                <label class="font-weight-bold" for="province_report">Province</label>
                                                <input type="text" class="form-control" placeholder="Province"
                                                    id="province_report" name="province_report">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group col-md-12">
                                        <div class="form-row">
                                            <div class="form-group col-md-4">
                                                <label class="font-weight-bold" for="street_report">Street</label>
                                                <input type="text" class="form-control" placeholder="Street"
                                                    id="street_report" name="street_report">
                                            </div>
                                            <div class="form-group col-md-4">
                                                <label class="font-weight-bold" for="street_number_report">Street
                                                    number</label>
                                                <input type="text" class="form-control" placeholder="Street number"
                                                    id="street_number_report" name="street_number_report">
                                            </div>
                                            <div class="form-group col-md-4">
                                                <label class="font-weight-bold" for="apartment_number_report">Apartment
                                                    number</label>
                                                <input type="text" class="form-control" placeholder="Apartment number"
                                                    id="apartment_number_report" name="apartment_number_report">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group col-md-12 text-left required">
                                        <label class="font-weight-bold control-label" for="legal_representative">Legal
                                            representative</label>
                                        <input type="text" class="form-control" id="legal_representative"
                                            name="legal_representative" placeholder="Legal representative"
                                            {{-- required --}}>
                                    </div>
                                </div>
                                <div class="button-row d-flex mt-4">
                                    <button class="btn btn-primary ml-auto js-btn-next" type="button"
                                        title="Next">Next</button>
                                </div>
                            </div>
                        </div>
                        <!--single form panel-->
                        <div class="multisteps-form__panel shadow p-4 rounded bg-white" data-animation="scaleIn">
                            <h3 class="multisteps-form__title">COMPANY DATA FOR INVOICING</h3>
                            <div class="multisteps-form__content">
                                <div class="form-row">
                                    <div class="form-group col-md-12 text-left required">
                                        <label class="font-weight-bold control-label" for="company_name_invoice">Company
                                            name</label>
                                        <input type="text" class="form-control" id="company_name_invoice"
                                            name="company_name_invoice" placeholder="Company name" {{-- required --}}>
                                    </div>
                                    <div class="form-group col-md-12 text-left">
                                        <label class="font-weight-bold control-label" for="rfc_invoice">RFC</label>
                                        <input type="text" class="form-control" id="rfc_invoice" name="rfc_invoice"
                                            value="XEXX010101000" {{-- required --}}>
                                    </div>
                                    <div class="form-group col-md-12 text-left">
                                        <label class="font-weight-bold control-label"
                                            for="tax_number_invoice">Tax-ID</label>
                                        <input type="text" class="form-control" id="tax_number_invoice"
                                            name="tax_number_invoice" placeholder="Tax-ID" {{-- required --}}>
                                    </div>
                                    <div class="form-group col-md-12 text-left">
                                        <label class="font-weight-bold control-label"
                                            for="tax_number_file_invoice">Tax-ID</label>
                                        <div class="custom-file">
                                            <input type="file" class="custom-file-input" id="tax_number_file_invoice"
                                                name="tax_number_file_invoice" accept=".png, .jpg, .jpeg, .pdf"
                                                {{-- required --}}>
                                            <label class="custom-file-label" for="tax_number_file_invoice">Upload file
                                                (.pdf)</label>
                                        </div>
                                    </div>
                                    <label class="font-weight-bold control-label text-center col-md-12"
                                        style="margin-bottom:10px;">FISCAL ADDRESS INFORMATION</label>
                                    <div class="form-group col-md-12">
                                        <div class="form-row">
                                            <div class="form-group col-md-4 {{-- required --}}">
                                                <label class="font-weight-bold control-label"
                                                    for="id_country_invoice">Country</label>
                                                <select class="selectpicker form-control" id="id_country_invoice"
                                                    name="id_country_invoice" {{-- required --}}
                                                    data-live-search="true">
                                                    <option selected disabled>--Select--</option>
                                                    @foreach ($countries as $countrie)
                                                        <option value="{{ $countrie->id_country }}">{{ $countrie->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="form-group col-md-4 required">
                                                <label class="font-weight-bold control-label" for="zip_code_invoice">Zip
                                                    code</label>
                                                <input type="text" class="form-control" placeholder="Zip code"
                                                    id="zip_code_invoice" name="zip_code_invoice">
                                            </div>
                                            <div class="form-group col-md-4 required">
                                                <label class="font-weight-bold control-label"
                                                    for="state_invoice">State</label>
                                                <input type="text" class="form-control" placeholder="State"
                                                    id="state_invoice" name="state_invoice">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group col-md-12">
                                        <div class="form-row">
                                            <div class="form-group col-md-4 required">
                                                <label class="font-weight-bold control-label"
                                                    for="city_invoice">City</label>
                                                <input type="text" class="form-control" placeholder="City"
                                                    id="city_invoice" name="city_invoice">
                                            </div>
                                            <div class="form-group col-md-4">
                                                <label class="font-weight-bold control-label"
                                                    for="municipality_invoice">Municipality</label>
                                                <input type="text" class="form-control" placeholder="Municipality"
                                                    id="municipality_invoice" name="municipality_invoice">
                                            </div>
                                            <div class="form-group col-md-4">
                                                <label class="font-weight-bold control-label"
                                                    for="province_invoice">Province</label>
                                                <input type="text" class="form-control" placeholder="Province"
                                                    id="province_invoice" name="province_invoice">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group col-md-12">
                                        <div class="form-row">
                                            <div class="form-group col-md-4">
                                                <label class="font-weight-bold control-label"
                                                    for="street_invoice">Street</label>
                                                <input type="text" class="form-control" placeholder="Street"
                                                    id="street_invoice" name="street_invoice">
                                            </div>
                                            <div class="form-group col-md-4">
                                                <label class="font-weight-bold control-label"
                                                    for="street_number_invoice">Street number</label>
                                                <input type="text" class="form-control" placeholder="Street number"
                                                    id="street_number_invoice" name="street_number_invoice">
                                            </div>
                                            <div class="form-group col-md-4">
                                                <label class="font-weight-bold control-label"
                                                    for="apartment_number_invoice">Apartment number</label>
                                                <input type="text" class="form-control" placeholder="Apartment number"
                                                    id="apartment_number_invoice" name="apartment_number_invoice">
                                            </div>
                                        </div>
                                    </div>

                                </div>
                                <div class="button-row d-flex mt-4">
                                    <button class="btn btn-primary js-btn-prev" type="button"
                                        title="Back">Back</button>
                                    <button class="btn btn-primary ml-auto js-btn-next" type="button"
                                        title="Next">Next</button>
                                </div>
                            </div>
                        </div>
                        <!--single form panel-->
                        <div class="multisteps-form__panel shadow p-4 rounded bg-white" data-animation="scaleIn">
                            <h3 class="multisteps-form__title">CONTACT INFORMATION</h3>
                            <div class="multisteps-form__content">
                                <div class="form-row">
                                    <div class="form-group col-md-12 text-left required">
                                        <label class="font-weight-bold control-label" for="contact_name">Contact
                                            name</label>
                                        <input type="text" class="form-control" id="contact_name" name="contact_name"
                                            placeholder="Contact name" {{-- required --}}>
                                    </div>
                                    <div class="form-group col-md-12 text-left required">
                                        <label class="font-weight-bold control-label" for="contact_cellphone">Cell phone
                                            number</label>
                                        <input type="text" class="form-control" id="contact_cellphone"
                                            name="contact_cellphone" placeholder="Contact cell phone number"
                                            {{-- required --}}>
                                    </div>
                                    <div class="form-group col-md-12 text-left required">
                                        <label class="font-weight-bold control-label" for="contact_email">E-mail</label>
                                        <input type="mail" class="form-control" id="contact_email"
                                            name="contact_email" placeholder="Contact e-mail" {{-- required --}}>
                                    </div>
                                </div>
                                <div class="button-row d-flex mt-4">
                                    <button class="btn btn-primary js-btn-prev" type="button"
                                        title="Back">Back</button>
                                    <button class="btn btn-success ml-auto" type="submit" title="Send">Send</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <br><br><br>
    </div>
    <script src="{{ url('assets/js/international_customers_portal/create_user_account.js') }}"></script>
@endsection