@extends('layouts.guest')

@section('content')
@push('style')
<style>
    html, body {
        font-family: 'Roboto', sans-serif !important;
    }
    .invalid-feedback {
        font-family: 'Roboto', sans-serif !important;
        display: block !important;
    }
    
    input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]) {
        color: #0c000b;
        padding: 15px 20px;
    }

    input[type=checkbox], input[type=radio] {
        width: 19px;
        height: 19px;
        margin-right: 5px;
    }

    .form-check-input[type=checkbox]:checked:focus, .form-check-input[type=checkbox]:checked, .form-check-input:checked {
        background-color: #0c000b;
        border-color: #0c000b;
    }
    
    .form-check-input:checked[type=checkbox] {
        background-image: unset;
        padding-left: 2px;
        padding-top: 1px;                        
                            
    }

    .btn-submit {
        width: 350px;
        background-color: #fae100 !important;
        color: #0c000b !important;
        border-radius: 50px 50px 50px 50px;
        padding: 20px;
        font-size: 17px;
        letter-spacing: -.5px;
    }

    .btn-submit:hover {
        background-color: #db00c5 !important;
        color: #fff !important;
    }

    .upload-btn {
        font-size: 17px;
        cursor: pointer;
        font-weight: 400;
        color: #0c000b !important;
        background: 0 0 !important;
        padding: 0 0 0 20px !important;
        text-decoration-line: underline;
        text-decoration-color: #DB00C5;
        text-decoration-thickness: 2px;
        text-underline-offset: 6px;
        -webkit-text-decoration-line: underline;
        -webkit-text-decoration-color: #DB00C5;
        -webkit-text-decoration-thickness: 2px;
        -webkit-text-underline-offset: 6px;
    }

    label.required:after {
        color: #f56c6c;
        content: "*";
        margin-left: 3px;
    }

    .form-outline .form-control~.form-notch div {
        border: 1px solid;
        /*border-color: #0c000b;*/
        /*background: rgba(0, 0, 0, 0);*/
        transition: unset;
    }

    .form-outline .form-control {
        background: unset; 
        transition: unset; 
    }   
    
    .form-outline .form-control~.form-notch .form-notch-leading {
        border-radius: 5px 0 0 5px;
    } 

    .form-outline .form-control~.form-notch .form-notch-trailing {
        border-radius: 0 5px 5px 0;
    } 

    .form-control,
    .form-control:focus {
        color: #212529;
        background-color: #f8fafc;
        /*border-color: unset !important;*/
    }

    .form-outline label {
        font-family: 'Roboto', sans-serif !important;
        font-size: 15px !important;
        font-weight: 800 !important;
        line-height: 0px;
        letter-spacing: -0.3px;
        padding: 0px 5px;
        margin-left: 10px;
        background: white;
        overflow: unset !important;
        padding-top: 1.05rem !important;
    }

    textarea::placeholder,
    input::placeholder {
        font-family: 'Roboto', sans-serif !important;
        color: #d5d5d5 !important;
        font-size: 15px !important;
        font-weight: 300 !important;
    }

    textarea::placeholder {
        padding-left: 8px;
        padding-top: 8px;
    }

    .btn-disabled {
        background-color: #d5d5d5 !important;
    }

    .modal-backdrop {
        display: none;    
    }

    .modal {
        background-color: rgba(255, 255, 255, 0.5); 
    }
</style>
@endpush
<form method="POST" id="request_offer" action="{{ route('guests.request_offer') }}" enctype="multipart/form-data">
    @csrf
    {{-- client --}}
    <div class="container-fluid">           
        <div class="row">     
            
            <div class="col-12 mb-4">
                <div class="form-outline" data-mdb-input-init>
                    <input type="text" class="form-control jquery-text-capitalize active" name="web_full_name" placeholder="{!! __('Név') !!}" required value="{{ old('web_full_name') ?? $client->web_full_name ?? '' }}">                    
                    <label for="web_full_name" class="form-label">{!! __('Név') !!}</label>
                </div>
                @error('web_full_name')
                <div class="mb-3">
                    <span class="invalid-feedback mb-2" role="alert">
                        <strong>{!! $message !!}</strong>
                    </span>
                </div>
                @enderror
            </div>

            <div class="col-12 mb-4">
                <div class="form-outline" data-mdb-input-init>
                    <input type="text" class="form-control active" name="email" placeholder="{!! __('Email') !!}" required value="{{ old('email') ?? '' }}">
                    <label for="email" class="form-label">{!! __('Email') !!}</label>
                </div>
                @error('email')
                <div class="mb-3">
                    <span class="invalid-feedback" role="alert">
                        <strong>{!! $message !!}</strong>
                    </span>
                </div>
                @enderror
            </div>

            <div class="col-12 mb-4">
                <div class="form-outline" data-mdb-input-init>
                    <input type="text" class="form-control active" name="phone" placeholder="{!! __('Telefon') !!}" required value="{{ old('phone') ?? '' }}">
                    <label for="phone" class="form-label">{!! __('Telefon') !!}</label>
                </div>
                @error('phone')
                <div class="mb-3">
                    <span class="invalid-feedback" role="alert">
                        <strong>{!! $message !!}</strong>
                    </span>
                </div>
                @enderror
            </div>
            
            <div class="col-12 mb-4">
                <div class="form-outline" data-mdb-input-init>
                    <input type="text" class="form-control active" name="web_full_address" placeholder="{!! __('Megvalósulás helyszínének címe') !!}" required value="{{ old('web_full_address') ?? $client->web_full_address ?? '' }}">                    
                    <label for="web_full_address" class="form-label">{!! __('Megvalósulás helyszínének címe') !!}</label>
                </div>
                @error('web_full_address')
                <div class="mb-3">
                    <span class="invalid-feedback" role="alert">
                        <strong>{!! $message !!}</strong>
                    </span>
                </div>
                @enderror
            </div>

            <div class="col-12 mb-4">
                <div class="form-outline" data-mdb-input-init>
                    <textarea 
                        class="form-control active" 
                        name="description" 
                        id="description" 
                        placeholder="Üzenet"
                        cols="30" 
                        rows="4"  
                        @error('description') is-invalid @enderror
                        required
                    >{{ isset($description) ? $description : old('description') }}</textarea>
                    <label class="form-label" for="description">Üzenet</label>                   
                </div>
                @error('description')                
                <div class="mb-3">
                    <span class="invalid-feedback" role="alert">
                        <strong>{!! $message !!}</strong>
                    </span>
                </div>
                @enderror
            </div>
            
            <div class="col-12 mb-4">
                <div class="form-group">
                    <input type="file" class="form-control d-none" id="file" name="file[]" style="height: auto !important" multiple accept=".jpg, .jpeg, .png, .gif, .tif, .pdf, .doc, .docx, .ppt, .pptx, .odt, .xls, .xlsx" max="15360"/>
                    <label for="file" id="fileLabel" class="upload-btn">Dokumentum csatolása +</label>
                    <div id="file-info"></div>
                    <div id="file-warning" class="text-danger"></div>
                </div>
            </div>

            <div class="col-12 mb-4">
                <div class="form-check"> 
                    <input class="form-check-input" type="checkbox" value="" id="privacy" name="privacy" required />
                    <label class="form-check-label" for="privacy">
                        Elfogadom az 
                        <a href="https://www.sikerablak.hu/adatvedelmi-tajekoztato/" style="color: #0C000B;" target="_blank">Adatvédelmi</a> 
                        tájékoztató és az
                        <a href="https://www.sikerablak.hu/aszf/" style="color: #0C000B;" target="_blank">ÁSZF</a>
                        tartalmát.
                    </label>
                </div>
            </div>

            <div class="col-12">
                <button type="submit" style="font-weight: 400;width: 350px;" class="btn btn-submit shadow-none d-flex align-items-center justify-content-center gap-2">
                    {!! __('Kérem az ajánlatot') !!}
                    <div class="spinner-border text-danger d-none" role="status">
                        <span class="visually-hidden">Folyamatban...</span>
                    </div>
                </button>
            </div>

        </div>
    </div>

</form>

{{-- sikeres ajánlatkérés üzenet --}}
@if (request()->query('success') === 'done')
    <div class="modal fade" id="successFormModal" tabindex="-1" role="dialog" aria-labelledby="successFormModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="successFormModalLabel">Köszönjük!</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="$('#successFormModal').modal('hide')">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Az ajánlatkérést sikeresen felvettük!
            </div>
            <div class="modal-footer">
                <button 
                    type="button" 
                    class="btn btn-submit shadow-none" 
                    style="width: 100px;height: 50px;padding:0px;" 
                    data-dismiss="modal"
                    onclick="$('#successFormModal').modal('hide')"
                >Bezár</button>
            </div>
            </div>
        </div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var successFormModal = new bootstrap.Modal(document.getElementById('successFormModal'));
            successFormModal.show();
        });
    </script>
@endif
@push('scripts')
<script>
$(function() {
    $('input[required], textarea[required], select[required]').each(function() {
        $(this).siblings('label').addClass('required');
    });

    $('form').on('submit', function(e) {
        var $submit_button = $(this).find('button[type=submit]');
        $submit_button.prop('disabled', true);
        $submit_button.addClass('btn-disabled');
        $submit_button.find('.spinner-border').removeClass('d-none');
    });

    //$('#fileLabel').on('click', function() {
      //$('#file').trigger();
    //});

    $('input, textarea').blur(function(event) {
        $(this).addClass('active');
    });

    $('.color-btn').on('click', function() {
        $('.input-color').css({color: 'red', 'background-color': 'black'});
    });

    $('[name="phone"]').each(function(){
        var input = this;

        var cleave = new Cleave(input, {
            delimiters: [' ', ' '],
            blocks: [3, 2, 3, 10],
            numericOnly: false,
        });

        $(input).on('input', function() {
            var phone = $(input).val();
            
            if (phone.startsWith('06')) {
                phone = '+36' + phone.substr(2);
            }

            var filtered_value = phone.replace(/[^0-9+]/g, '');

            if (phone !== filtered_value) 
                phone = filtered_value;

            cleave.setRawValue(phone);
        });
    });

    var all_file=[];

    $('#file').on('change', function() {
        var files = $(this)[0].files;
        var file_info_div = $('#file-info');
        var warning = $('#file-warning');
        var upload_limit = 3;
        var max_size_mb = 10;
        var total_size_mb = 0;

        //file_info_div.empty(); 
        warning.empty(); 

        if (files.length > upload_limit) {
            warning.html('Maximum '+upload_limit+' fájlt tölthetsz fel!');
            //$(this).val('');
            return;
        }
        
        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            total_size_mb += file.size / (1024 * 1024); // Byte-ról MB-ra konvertálás
        }

        if (total_size_mb > max_size_mb) {
            warning.html('A fájlok összmérete nem haladhatja meg a ' + max_size_mb + ' MB-ot!');
            //$(this).val('');
            return;
        }

        files_to_html(file_info_div, files, true);
    });

    $(document).on('click','.remove-file',function(){
        var id = parseInt($(this).attr("file-id"));
        var file_info_div = $('#file-info');

        remove_file(id);
        
        all_file.splice(id, 1);
        
        file_info_div.empty();
        
        //document.getElementById("file").files = all_file;
        
        files_to_html(file_info_div, all_file)
    });

    function remove_file(index)
    {
        var attachments = document.getElementById("file").files; 
        var fileBuffer = new DataTransfer();

        for (let i = 0; i < attachments.length; i++) {
            if (index !== i)
                fileBuffer.items.add(attachments[i]);
        }
        
        document.getElementById("file").files = fileBuffer.files;
    }

    function files_to_html(file_info_div, files, push = false)
    {
        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            var file_size = (file.size / 1024).toFixed(2); 
            var file_name = file.name;
            var file_extension = file_name.split('.').pop();

            if(push)
                all_file.push(file);
            
            // Frissítjük a file input tartalmát
            var input = document.getElementById("file");
            var fileBuffer = new DataTransfer();
            
            // Hozzáadjuk az összes fájlt a fileBuffer-hez
            all_file.forEach(file => fileBuffer.items.add(file));

            input.files = fileBuffer.files;
            
            var file_info = `
                <div class="row my-3 mx-2" style="border: 1px solid #ced4da; border-radius: 5px; overflow: hidden;">
                    <div class="col-1 d-flex align-items-center justify-content-center bg-secondary text-light" style="width: 60px; height: 60px;">
                        ${file_extension}
                    </div>
                    <div class="col d-flex flex-column justify-content-center position-relative">
                        <div class="remove-file position-absolute text-danger" style="top: 0px; right: 10px; cursor: pointer;" file-id="${i}">x</div>
                        ${file_name}
                        <div class="progress" style="height: 5px;">
                        <div class="progress-bar" role="progressbar" aria-label="Folyamatban" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                        ${file_size} KB
                    </div>
                </div>
            `;

            file_info_div.append(file_info);
        }

        $('.progress-bar').each(function() {
            var progressBar = $(this);
            var valeur = 100;
            var timeout = rand_int(100, 200);
            setTimeout(function() {
                progressBar.css('width', valeur + '%').attr('aria-valuenow', valeur);
            }, timeout); 
        });
    }

    function rand_int(min, max) {
        return Math.floor(min + Math.random()*(max - min + 1))
    }
});
</script>
@endpush

@endsection