@extends('admin.layouts.admin')

@section('content')
    <section class="pc-container">
        <div class="pc-content">
            <div class="page-header">
                <div class="page-block">
                    <div class="row align-items-center">
                        <div class="col-md-12">
                            <ul class="breadcrumb">
                                <li class="breadcrumb-item">
                                    Settings
                                </li>
                                <li class="breadcrumb-item">
                                    Basic
                                </li>
                            </ul>
                        </div>
                        <div class="col-md-12">
                            <div class="page-header-title">
                                <h3 class="mb-0">Basic</h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row pt-0">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-body pt-4">
                            <div>
                                @if(Session::has('message'))
                                    <p class="alert {{ Session::get('alert-class', 'alert-info') }} flash-msg">{{ Session::get('message') }}</p>
                                @endif
                            </div>

                            <div>
                                @if ($errors->any())
                                    <div class="alert alert-danger">
                                        <ul>
                                            @foreach ($errors->all() as $error)
                                                <li>
                                                    {{ $error }}
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                @endif
                            </div>

                            <ul class="nav nav-tabs mb-3" id="myTab" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link text-uppercase active" id="basic-settings-tab" data-bs-toggle="tab" href="#settings-basic" role="tab" aria-controls="basic settings" aria-selected="true">
                                        Basic
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link text-uppercase" id="content-settings-tab" data-bs-toggle="tab" href="#settings-content" role="tab" aria-controls="content settings" aria-selected="true">
                                        Content
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link text-uppercase" id="social-settings-tab" data-bs-toggle="tab" href="#settings-social" role="tab" aria-controls="social settings" aria-selected="true">
                                        Social
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link text-uppercase" id="page-404-settings-tab" data-bs-toggle="tab" href="#settings-404" role="tab" aria-controls="page 404 settings" aria-selected="true">
                                        404 Page
                                    </a>
                                </li>
                            </ul>

                            <form action="{{ route('admin.update-settings') }}" method="post" enctype="multipart/form-data">
                                @csrf

                                <div class="tab-content" id="myTabContent">
                                    <div class="tab-pane fade show active" id="settings-basic" role="tabpanel" aria-labelledby="basic-settings-tab">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group col-md-12">
                                                    <div>
                                                        <label class="form-label">Logo</label>
                                                        <input name="logo" class="form-control" type="file" accept="image/jpg, image/jpeg, image/png, image/webp" onchange="loadFile_3(event)">
                                                    </div>

                                                    <div class="d-flex mt-3">
                                                        @if ($settings->logo == '')
                                                            <img class="img-fluid image-preview shadow" src="" alt="" id="output-3">
                                                        @else
                                                            <a href="{{ $settings->logo }}" target="_blank">
                                                                <img class="img-fluid image-preview shadow" src="{{ $settings->logo }}" alt="" id="output-3">
                                                            </a>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="row">
                                                    <div class="form-group col-md-6 col-xlg-4">
                                                        <label class="form-label">Phone</label>
                                                        <input type="text" name="phone" class="form-control" placeholder="Phone number" value="{!! old('phone', $settings->phone) !!}">
                                                    </div>
                                                    <div class="form-group col-md-6 col-xlg-4">
                                                        <label class="form-label">Email</label>
                                                        <input type="email" name="email" class="form-control" placeholder="Email address" value="{!! old('email', $settings->email) !!}">
                                                    </div>
                                                    <div class="form-group col-md-12">
                                                        <label class="form-label">Location</label>
                                                        <input type="text" name="location" class="form-control" placeholder="Location" value="{!! old('location', $settings->location) !!}">
                                                    </div>
                                                    <div class="form-group col-md-12">
                                                        <label class="form-label">Map</label>
                                                        <textarea class="form-control" name="map" id="" cols="30" rows="6">{!! old('map', $settings->map) !!}</textarea>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="tab-pane fade" id="settings-content" role="tabpanel" aria-labelledby="content-settings-tab">
                                        <div class="row">
                                            <div class="form-group col-md-12">
                                                <label class="form-label">Size Chart</label>
                                                <input name="size_chart" class="form-control" type="file" accept="image/jpg, image/jpeg, image/png, image/webp" onchange="loadFile_2(event)">
                                            </div>
                                            <div class="col-md-12">
                                                <div class="d-flex">
                                                    @if ($settings->size_chart == '')
                                                        <img class="img-fluid image-preview" src="" alt="" id="output-2">
                                                    @else
                                                        <a href="{{ $settings->size_chart }}" target="_blank">
                                                            <img class="img-fluid image-preview" src="{{ $settings->size_chart }}" alt="" id="output-2">
                                                        </a>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="tab-pane fade" id="settings-social" role="tabpanel" aria-labelledby="social-settings-tab">
                                        <div class="row">
                                            <div class="form-group col-md-6">
                                                <label class="form-label">Facebook</label>
                                                <input type="text" name="facebook" class="form-control" value="{!! old('facebook', $settings->facebook) !!}">
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label class="form-label">Instagram</label>
                                                <input type="text" name="instagram" class="form-control" value="{!! old('instagram', $settings->instagram) !!}">
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label class="form-label">Pinterest</label>
                                                <input type="text" name="pinterest" class="form-control" value="{!! old('pinterest', $settings->pinterest) !!}">
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label class="form-label">Tiktok</label>
                                                <input type="text" name="tiktok" class="form-control" value="{!! old('tiktok', $settings->tiktok) !!}">
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label class="form-label">X</label>
                                                <input type="text" name="x" class="form-control" value="{!! old('x', $settings->x) !!}">
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label class="form-label">LinedIn</label>
                                                <input type="text" name="linkedIn" class="form-control" value="{!! old('linkedIn', $settings->linkedIn) !!}">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="tab-pane fade" id="settings-404" role="tabpanel" aria-labelledby="page-404-settings-tab">
                                        <div class="row">
                                            <div class="form-group col-md-12">
                                                <label class="form-label">Page Content</label>
                                                <textarea name="page_404_content" class="form-control ckeditor" placeholder="Content">{!! old('page_404_content', $settings->page_404_content) !!}</textarea>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="row">
                                                    <div class="form-group col-md-12">
                                                        <label class="form-label">Image</label>
                                                        <input name="page_404_image" class="form-control" type="file" accept="image/jpg, image/jpeg, image/png, image/webp" onchange="loadFile_1(event)">
                                                    </div>
                                                    <div class="col-md-12">
                                                        <div class="d-flex">
                                                            @if ($settings->page_404_image == '')
                                                                <img class="img-fluid image-preview" src="" alt="" id="output-1">
                                                            @else
                                                                <a href="{{ $settings->page_404_image }}" target="_blank">
                                                                    <img class="img-fluid image-preview" src="{{ $settings->page_404_image }}" alt="" id="output-1">
                                                                </a>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-12">
                                        <input type="submit" value="Save" class="btn btn-primary m-t-20 m-b-20" data-bs-toggle="tooltip" data-bs-original-title="Save changes">
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
    </section>

    <script>
        var loadFile_1 = function(event) {
            var output_1 = document.getElementById('output-1');
            output_1.src = URL.createObjectURL(event.target.files[0]);
            output_1.onload = function() {
              URL.revokeObjectURL(output_1.src) // free memory
            }
        };

        var loadFile_2 = function(event) {
            var output_2 = document.getElementById('output-2');
            output_2.src = URL.createObjectURL(event.target.files[0]);
            output_2.onload = function() {
              URL.revokeObjectURL(output_2.src) // free memory
            }
        };

        var loadFile_3 = function(event) {
            var output_3 = document.getElementById('output-3');
            output_3.src = URL.createObjectURL(event.target.files[0]);
            output_3.onload = function() {
              URL.revokeObjectURL(output_3.src) // free memory
            }
        };
    </script>

@endsection