@extends ('layouts.app')

@section('content')

<div class="container">
    @include('layouts.subnav')

    <div class="mb-4"></div>

    @if(session('success'))
    <div class="position-fixed top-0 end-0 p-3" style="z-index: 1050;">
        <div class="toast show align-items-center text-bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true" autohide="false">
            <div class="d-flex">
                <div class="toast-body">
                    {{ session('success') }}
                </div>
                <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
        </div>
    </div>
    <script>
        setTimeout(function() {
            location.reload();
        }, 1000);
    </script>
    @endif
    @if (auth()->user()->name === 'admin')
    <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" style="color: black;" data-bs-toggle="tab" href="#home">App Customization</a>
        </li>
    </ul>

    <div class="tab-content">
        <div id="home" class=" tab-pane active"><br>
            <h1 class="fs-3 fw-bold">Add App Customization</h1><br>
            <div class="row">
                <div class="justify-content-center mx-auto" style="width:70%;">
                    <form action="{{ route('customization') }}" method="POST" enctype="multipart/form-data">
                        <input type="hidden" name="id" value="{{$organization->id}}">
                        @csrf
                        <!-- <div class="row mb-3">
                            <label for="add_banner" class="col-sm-2 fw-bold col-form-label">Add Banner Logo:</label>
                            <div class="col-sm-10">
                                <input class="form-control" type="file" name="add_banner" id="add_banner" multiple>
                            </div>
                        </div> -->
                        <div class="row mb-3 align-items-center">
                            <label for="add_banner" class="col-sm-2 fw-bold col-form-label">Add Banner Logo:</label>
                            <div class="col-sm-3">
                                <img id="selectedImage" src="https://mdbootstrap.com/img/Photos/Others/placeholder.jpg"
                                    alt="example placeholder" style="width: 150px;" />
                            </div>

                            <div class="col-sm-6">
                                <div class="btn btn-info btn-rounded d-inline-flex align-items-center" style="background: #00ACCD;">
                                    <label class="form-label text-white m-1" for="customFile1">Choose file</label>
                                    <input type="file" name="add_banner" class="form-control d-none" id="customFile1"
                                        onchange="displaySelectedImage(event, 'selectedImage')" />
                                </div>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label for="privacy_policy" class="col-sm-2 fw-bold col-form-label">Privacy Policy:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control rounded-pill border-2" name="privacy_policy" placeholder="Enter privacy policy" id="privacy_policy" required>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label for="feedback" class="col-sm-2 fw-bold col-form-label">Feedback:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control rounded-pill border-2" name="feedback" id="feedback" placeholder="Enter feedback">
                            </div>
                        </div>
                        <div class="row mb-3  align-items-center">
                            <label for="user_agreement" class="col-sm-2 fw-bold col-form-label">User Agreement:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control rounded-pill border-2" name="user_agreement" id="user_agreement" placeholder="Enter user agreement">
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="d-flex align-items-center">
                                <label for="reports" class="col-sm-2 fw-bold col-form-label">Reports:</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control rounded-pill border-2" name="reports" placeholder="Enter Reports">
                                </div>
                            </div>
                        </div>
                        <div class="mb-3"></div>
                        <div class="nav nav-pills justify-content-center align-items-center">
                            <button type="submit" class="border-3 btn btn-success fw-bold">Upload</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    @else
    <div class="mt-5"></div>
    <span class="alert alert-danger fw-bold fs-6 rounded-pill">
        You don't have permission
    </span>
    @endif

</div>

@endsection