@extends('reachassuree_agent/layouts.main')
@section('title', $data['title'])
@section('content')

<style>
    img.general {
        height: 50px;
        margin-bottom: 20px;
    }

    img.loading {
        height: 200px;
        margin-bottom: 20px;
    }

    @media screen and (max-width:480px) {
        .p-4 {
            padding: 0.8rem !important;
        }

        .page-title-box {
            padding-bottom: 15px;
        }
    }

    .nav-justified .nav-item {
        -webkit-box-flex: 1;
        flex-grow: 1;
        text-align: center;
    }

    .nav-justified .nav-item {
        flex-basis: unset !important;
    }

    .nav-fill .nav-item .nav-link,
    .nav-justified .nav-item .nav-link {
        width: unset !important;
    }

    .d-sm-block {
        display: block !important;
        clear: both;
        overflow: hidden;
        white-space: nowrap;
    }

    span#cke_142,
    span#cke_140,
    span#cke_135,
    span#cke_131,
    span#cke_129,
    span#cke_121,
    span#cke_70,
    span#cke_78,
    span#cke_80,
    span#cke_84,
    span#cke_89,
    span#cke_91,
    span#cke_19,
    span#cke_27,
    span#cke_29,
    span#cke_33,
    span#cke_38,
    span#cke_40 {
        display: none;
    }

    .label {
        cursor: pointer;
    }

    .progress {
        display: none;
        margin-bottom: 1rem;
    }

    .alert {
        display: none;
    }

    .img-container img {
        max-width: 100%;
    }
</style>

<div class="page-content">
    <div class="container-fluid">
        <!-- start page title -->
        @include('../reachassuree_agent/master/comman/header')
        @include('../reachassuree_agent/setting/webpage_setting/comman')

        <div class="card">
            <div class="card-body">
                <div class="tab-content">
                    <form action="{{route('web.header.save')}}" method="POST" id="formWebHeader" class="needs-validation" novalidate enctype="multipart/form-data">
                        @csrf
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label mt-3">Web Header Image 1(Size-370X520)</label><br>
                                    <input type="file" class="form-control" id="web_header_image1" name="web_header_image1" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label mt-3">Web Header Image 2(Size-370X520)</label><br>
                                    <input type="file" class="form-control" id="web_header_image2" name="web_header_image2" required>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-10"></div>
                            <div class="col-md-2">
                                <div class="mb-3">
                                    <label  class="form-label extra_space" id="spaceRemove">&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                    <button type="submit" class="form-control btn btn-primary">Save Changes</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('custom-scripts')
<script src="{{ asset('assets/libs/parsleyjs/parsley.min.js') }}"></script>
<script src="{{ asset('assets/js/pages/form-validation.init.js') }}?v=2"></script>
<script src="{{ asset('assets/js/pages/jquery.form.js') }}"></script>

<script type="text/javascript">
    $(document).ready(function() {
        var options = {
            beforeSubmit: showRequest, // pre-submit callback
            success: showResponse // post-submit callback
        }

        $('#formWebHeader').submit(function() {
            $(this).ajaxSubmit(options);
            return false;
        });
    });

    function showRequest(formData, jqForm, options) {
        showLoader();

        var queryString = $.param(formData);
        return true;
    }

    function showResponse(responseText, statusText, xhr, $form) {
        hideLoader();

        if (responseText['status'] == 1) {
            toastr["success"](responseText['msg']);

            $("#formWebHeader").removeClass('was-validated');
            
        } else if (responseText['status'] == 0) {
            toastr["error"](responseText['msg']);
        }
    }
</script>
@endsection