@extends('Dashboard.master_page')



@section('content')
    <div class="bg-image" style="background-image: url('assets/media/photos/photo10@2x.jpg');">
        <div class="bg-primary-dark-op">
            <div class="content content-full text-center">
                
                <h1 class="h2 text-white mb-0">Domain Transfer</h1>
                
            </div>
        </div>
    </div>



    <div class="content content-boxed">
        <div class="block block-rounded">
            <div class="block-header block-header-default">

                <h3 class="block-title">Domain Transfer</h3>


            </div>

            @if (Session::has('error_message'))
                <div class="alert alert-danger d-flex align-items-center justify-content-between" role="alert">
                    <div class="flex-grow-1 me-3">
                        <p class="mb-0">
                            {{ Session::get('error_message') }}
                        </p>
                    </div>

                </div>
            @endif

            @if (Session::has('success_message'))
                <div class="alert alert-success d-flex align-items-center justify-content-between" role="alert">
                    <div class="flex-grow-1 me-3">
                        <p class="mb-0">
                            {{ Session::get('success_message') }}
                        </p>
                    </div>

                </div>
            @endif

            <div class="block-content block-content-full first-step">
                @forelse($errors as $error)
                    <p>{{ $error }}</p>
                @empty
                @endforelse
               <div class="row" style="justify-content:center">
                    <div class="col-lg-12 col-xl-8">   
                        <div class="form-floating mb-4">
                            <select class="form-select domainTransferOption" id="example-select-floating" name="Option"
                                aria-label="Floating label select example">
                                <option value="None" hidden>Select Option</option>
            					<option value="Domain" {{ isset($_GET['type']) && $_GET['type'] == 'domain' ? 'selected':'' }} >.AF Domain Transfer</option>
            					<option value="LeapToLeap" {{ isset($_GET['type']) && $_GET['type'] == 'leap' ? 'selected':'' }}>myLEAP To myLEAP</option>
                            </select>
                            <label for="example-select-floating">Please Select your Transfer Option</label>
                        </div>
                   </div>
               </div>
            </div>
            
            <div class="second-step" style="display:none;">
                <div class="block-content block-content-full " >
               <div class="row justify-center">
                    <form action="{{ route('domain.transfer.check') }}" method="POST" class="row" style="justify-content:center">
                    @csrf
                    <input type="hidden" class="transferOption" name="transferOption" />
                   <div class="col-lg-12 col-xl-8"> 
                            <div class="form-floating mb-4">
                                <input type="text" class="form-control" placeholder="Domain Name *" required
                                    name="domain_name">
                                <label for="example-password-input-floating">Domain Name *</label>
                            </div>

                            <button type="submit" class="btn btn-alt-primary">Check</button>
                        </div>
                </form>
               </div>
            </div>
            </div>
            
            
        </div>


    </div>
@endsection
@section('script')
<script>
    $(document).ready(function(){
        $('.domainTransferOption').change(function(){
            const check = $(this).val();
            const options =  ['Domain','LeapToLeap'];
            if(options.includes(check)){
                $('.first-step').css('display','none');
                $('.second-step').css('display','');
                $('.transferOption').val(check);
            }else{
                $('.first-step').css('display','');
                $('.second-step').css('display','none');
                $('.transferOption').val("");
            }
        });
    });
</script>
@endsection
