@extends('front.layout')
@section('header')
    <link rel="stylesheet" href="/front/assets/css/pages/request.css" />
    <title>{{ trans('translate.page_title_request') }}</title>
    <style>
        .merge-form-control input{
            border: none!important;
        }
        @media only screen and (max-width: 768px) {
            .image-banner {
                h1 {
                    margin-bottom: 59px;
                }
            }
        }
    </style>
@endsection

@section('content')
    <div class="image-banner">
        <img src="/6.jpg" class="d-block w-100" alt="title" />
        <div>
            <h1>
                <div class="container">{{ trans('translate.request_heading') }}</div>
            </h1>
        </div>
    </div>

    <div class="container">
        <div class="form-container">
            <div class="radio-group">
                <input type="radio" id="company" name="formType" value="company" checked>
                <label for="company">{{ trans('translate.company_option') }}</label>
                <input type="radio" id="personal" name="formType" value="personal">
                <label for="personal">{{ trans('translate.personal_option') }}</label>
            </div>

            @if (\Illuminate\Support\Facades\Session::has('failed'))
                <div class="alert alert-danger" role="alert">{{ \Illuminate\Support\Facades\Session::get('failed') }}</div>
            @endif

            @if (\Illuminate\Support\Facades\Session::has('success'))
                <div class="alert alert-success" role="alert">{{ \Illuminate\Support\Facades\Session::get('success') }}</div>
            @endif

            <form method="post" action="{{ getFirstSegment() }}forms/999" id="company-form">
                @csrf
                <input type="hidden" name="type" value="{{ $type }}">
                <input type="hidden" name="step" value="company">
                <h5 class="form-title">{{ trans('translate.company_info') }}</h5>
                <div class="row g-3">
                    <div class="col-md-4"><input type="text" class="form-control" name="company_name" required placeholder="{{ trans('translate.company_name_placeholder') }}"></div>
{{--                    <div class="col-md-4"><input type="text" class="form-control" name="company_code" required placeholder="{{ trans('translate.company_code_placeholder') }}"></div>--}}
                    <div class="col-md-4"><input type="text" class="form-control" name="full_name" required placeholder="{{ trans('translate.full_name_placeholder') }}"></div>
                    <div class="col-md-4"><input type="text" class="form-control" name="phone_number" required placeholder="{{ trans('translate.phone_placeholder') }}"></div>
{{--                    <div class="col-md-4"><input type="text" class="form-control" name="fax" required placeholder="{{ trans('translate.fax_placeholder') }}"></div>--}}
                    <div class="col-md-4"><input type="email" class="form-control" name="email" placeholder="{{ trans('translate.email_placeholder') }}"></div>
                    <div class="col-md-8"><input type="text" class="form-control" name="address" required placeholder="{{ trans('translate.address_placeholder') }}"></div>
                </div>

                <h5 class="form-title form-title-2nd">{{ trans('translate.shipping_info') }}</h5>
                <div class="row g-3">
                    <div class="col-md-6">
                        <div class="merge-form-control">
                            <input type="text" class="form-control" name="origin_station_name" required placeholder="{{ trans('translate.origin_station_name_placeholder') }}">
{{--                            <input type="text" class="form-control" name="origin_station_code" required placeholder="{{ trans('translate.origin_station_code_placeholder') }}">--}}
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="merge-form-control">
                            <input type="text" class="form-control" name="destination_station_name" required placeholder="{{ trans('translate.destination_station_name_placeholder') }}">
{{--                            <input type="text" class="form-control" name="destination_station_code" required placeholder="{{ trans('translate.destination_station_code_placeholder') }}">--}}
                        </div>
                    </div>

                    <div class="col-md-4"><input type="text" class="form-control" name="product_name" required placeholder="{{ trans('translate.product_name_placeholder') }}"></div>
                    <div class="col-md-4"><input type="text" class="form-control" name="tonnage" required placeholder="{{ trans('translate.tonnage_placeholder') }}"></div>
                    <div class="col-md-4"><input type="text" class="form-control" name="packing" placeholder="{{ trans('translate.packing_placeholder') }}"></div>
                    <div class="col-md-12"><textarea class="form-control" name="description" placeholder="{{ trans('translate.description_placeholder') }}"></textarea></div>
                </div>
                <button class="btn btn-submit mt-4">
                    {{ trans('translate.submit_info') }}
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="me-2">
                        <path d="M16.19 2H7.81C4.17 2 2 4.17 2 7.81V16.18C2 19.83 4.17 22 7.81 22H16.18C19.82 22 21.99 19.83 21.99 16.19V7.81C22 4.17 19.83 2 16.19 2ZM18 12.75H7.81L10.82 15.76C11.11 16.05 11.11 16.53 10.82 16.82C10.67 16.97 10.48 17.04 10.29 17.04C10.1 17.04 9.91 16.97 9.76 16.82L5.47 12.53C5.33 12.39 5.25 12.2 5.25 12C5.25 11.8 5.33 11.61 5.47 11.47L9.76 7.18C10.05 6.89 10.53 6.89 10.82 7.18C11.11 7.47 11.11 7.95 10.82 8.24L7.81 11.25H18C18.41 11.25 18.75 11.59 18.75 12C18.75 12.41 18.41 12.75 18 12.75Z" fill="white"/>
                    </svg>
                </button>
            </form>

            <form method="post" action="{{ getFirstSegment() }}forms/998" id="personal-form">
                @csrf
                <input type="hidden" name="type" value="{{ $type }}">
                <input type="hidden" name="step" value="personal">
                <h5 class="form-title">{{ trans('translate.personal_info') }}</h5>
                <div class="row g-3">
                    <div class="col-md-4"><input type="text" class="form-control" required name="full_name" placeholder="{{ trans('translate.full_name_placeholder') }}"></div>
{{--                    <div class="col-md-4"><input type="text" class="form-control" required name="national_code" placeholder="{{ trans('translate.national_code_placeholder') }}"></div>--}}
                    <div class="col-md-4"><input type="text" class="form-control" required name="phone_number" placeholder="{{ trans('translate.phone_placeholder') }}"></div>
                    <div class="col-md-4"><input type="text" class="form-control" required name="mobile" placeholder="{{ trans('translate.mobile_placeholder') }}"></div>
{{--                    <div class="col-md-4"><input type="text" class="form-control" required name="fax" placeholder="{{ trans('translate.fax_placeholder') }}"></div>--}}
                    <div class="col-md-4"><input type="email" class="form-control" name="email" placeholder="{{ trans('translate.email_placeholder') }}"></div>
                    <div class="col-md-8"><input type="text" class="form-control" required name="address" placeholder="{{ trans('translate.address_placeholder') }}"></div>
                </div>

                <h5 class="form-title form-title-2nd">{{ trans('translate.shipping_info') }}</h5>

                <div class="row g-3">
                    <div class="col-md-6">
                        <div class="merge-form-control">
                            <input type="text" class="form-control" name="origin_station_name" required placeholder="{{ trans('translate.origin_station_name_placeholder') }}">
{{--                            <input type="text" class="form-control" required placeholder="{{ trans('translate.origin_station_code_placeholder') }}">--}}
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="merge-form-control">
                            <input type="text" class="form-control" name="destination_station_name" required placeholder="{{ trans('translate.destination_station_name_placeholder') }}">
{{--                            <input type="text" class="form-control" name="destination_station_code" required placeholder="{{ trans('translate.destination_station_code_placeholder') }}">--}}
                        </div>
                    </div>

                    <div class="col-md-4"><input type="text" required name="product_name" class="form-control" placeholder="{{ trans('translate.product_name_placeholder') }}"></div>
                    <div class="col-md-4"><input type="text" required name="tonnage" class="form-control" placeholder="{{ trans('translate.tonnage_placeholder') }}"></div>
                    <div class="col-md-4"><input type="text" name="packing" class="form-control" placeholder="{{ trans('translate.packing_placeholder') }}"></div>
                    <div class="col-md-12"><textarea class="form-control" name="description" placeholder="{{ trans('translate.description_placeholder') }}"></textarea></div>
                </div>
                <button class="btn btn-submit mt-4">
                    {{ trans('translate.submit_info') }}
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="me-2">
                        <path d="M16.19 2H7.81C4.17 2 2 4.17 2 7.81V16.18C2 19.83 4.17 22 7.81 22H16.18C19.82 22 21.99 19.83 21.99 16.19V7.81C22 4.17 19.83 2 16.19 2ZM18 12.75H7.81L10.82 15.76C11.11 16.05 11.11 16.53 10.82 16.82C10.67 16.97 10.48 17.04 10.29 17.04C10.1 17.04 9.91 16.97 9.76 16.82L5.47 12.53C5.33 12.39 5.25 12.2 5.25 12C5.25 11.8 5.33 11.61 5.47 11.47L9.76 7.18C10.05 6.89 10.53 6.89 10.82 7.18C11.11 7.47 11.11 7.95 10.82 8.24L7.81 11.25H18C18.41 11.25 18.75 11.59 18.75 12C18.75 12.41 18.41 12.75 18 12.75Z" fill="white"/>
                    </svg>
                </button>
            </form>
        </div>
    </div>
@endsection

@section('footer')
    <script>
        $(document).ready(function() {
            $("#company-form").slideDown();
            $("#personal-form").slideUp();

            $("input[name='formType']").change(function() {
                if ($(this).val() === "personal") {
                    $("#company-form").slideUp();
                    $("#personal-form").slideDown();
                } else {
                    $("#company-form").slideDown();
                    $("#personal-form").slideUp();
                }
            });
        });
    </script>
@endsection