@extends('layout.layout')


@section('section_title') {{ $section_title }} @endsection

@section('css')
<link rel="stylesheet" type="text/css" href="{{ asset('assets/lib/dropzone/dropzone.css') }}" />
<link rel="stylesheet" type="text/css" href="{{ asset('assets/lib/ui-confirm/duDialog.min.css')}}" />
<style>
    .dropzone {
        padding: 0 !important;
    }

    .dz-image {
        width: 100% !important;
        height: 160px !important;
    }

    .dz-image img {
        width: 100% !important;
    }

    .imagem_atual,
    .imagem_atual-mobile {
        height: 200px;
        width: 100%;
        background-size: 100% !important;
        margin-bottom: 15px;
    }

    .imagem_atual-mobile {
        width: 23%;
        margin-left: auto;
        margin-right: auto;
    }

    .tab-content {
        background-color: transparent !important;
    }

    /* Chrome, Safari, Edge, Opera */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* Firefox */
    input[type=number] {
        -moz-appearance: textfield;
    }
</style>

<link rel="stylesheet" type="text/css" href="{{ asset('assets/lib/bootstrap-touchspin/jquery.bootstrap-touchspin.min.css') }}" />
<link rel="stylesheet" type="text/css" href="https://daneden.github.io/animate.css/animate.min.css" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/lib/datepicker/css/bootstrap-datepicker3.css') }}" />
@endsection
@section('breadcrumb')
<ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="{{ route('sistema.dashboard') }}">Home</a></li>
    <li class="breadcrumb-item"><a href="{{route('sistema.banners.index')}}">Banners</a></li>
    <li class="breadcrumb-item active">{{ $section_title }}</li>
</ol>
@endsection
@section('content')

<div class="row">
    <div class="col-sm-12">
        <p class=" {{Session::has('message') ? '' : 'd-none'}} alert animated fadeIn {{ Session::get('alert-class', 'alert-info') }}">{{ Session::get('message') }}
        </p>
    </div>
</div>
@if(isset($banner))
<form role="form" name="formContato" method="PUT" action="/api/banners/{{$banner->id}}">
    @else
    <form role="form" name="formContato" method="POST" action="/api/banners/store">
        @endif
        <input type="hidden" name="id" value="{{ isset($banner->id) ? $banner->id : '' }}">
        <input type="hidden" name="id_cliente" value="{{ isset($banner->clientes_id) ? $banner->clientes_id : '' }}">
        <input type="hidden" name="id_tipo" value="{{ isset($banner->tipo_id) ? $banner->tipo_id : '' }}">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <div class="row">
            <div class="col-lg-12 col-md-12">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12">
                                <div class="form-group">
                                    <label>Descrição</label>
                                    <input type="text" name="descricao" class="form-control" value="{{isset($banner->descricao) ? $banner->descricao : ''}}">
                                    <ul class="parsley-errors-list filled" style="display:none" for="descricao">
                                        <li class="parsley-required"></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <div class="form-group">
                                    <label>Tipo de banner</label>
                                    <select name="tipo_id" class="form-control select2 selectTipo"></select>
                                    <ul class="parsley-errors-list filled" style="display:none" for="tipo_id">
                                        <li class="parsley-required"></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-8">
                                <div class="form-group">
                                    <label>Cliente</label>
                                    <select name="clientes_id" class="form-control select2 selectClientes"></select>
                                    <ul class="parsley-errors-list filled" style="display:none" for="clientes_id">
                                        <li class="parsley-required"></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="form-group">
                                    <label>Status</label>
                                    <select class="form-control" name="status">
                                        <option value="">Selecione</option>
                                        @foreach(['1'=>'Ativo','0'=>'Inativo'] as $key => $tipo)
                                        <option value="{{$key}}" {{isset($banner) && $key == $banner->status ? 'selected' : ''}}>
                                            {{ $tipo }}
                                        </option>
                                        @endforeach
                                    </select>
                                    <ul class="parsley-errors-list filled" style="display:none" for="status">
                                        <li class="parsley-required"></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-6">
                                <div class="form-group nopadding">
                                    <label>Data de início</label>
                                    <input type="text" class="form-control error" placeholder="Data de início" name="data_inicio" value="{{isset($banner->data_inicio) ? date('d/m/Y', strtotime($banner->data_inicio)) : ''}}">
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group nopadding">
                                    <label>Data de fim</label>
                                    <input type="text" class="form-control error" placeholder="Data de fim" name="data_fim" value="{{isset($banner->data_fim) ? date('d/m/Y', strtotime($banner->data_fim)) : ''}}">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-6">
                                <div class="form-group">
                                    <label>Imagem</label>
                                    @if(isset($banner->imagem) && $banner->imagem != '')
                                    <div class="imagem_atual" style="background-image: url({{$banner->imagem}})"></div>
                                    @endif
                                    <div class="dropzone" id="foto-banner-dropzone" action="assets/lib/dropzone/upload.php">
                                        <div class="dz-message">
                                            <div class="icon">
                                                <span class="s7-cloud-upload"></span>
                                            </div>
                                            <h4>Arraste e solte a imagem aqui.</h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group">
                                    <label>Imagem Mobile</label>
                                    @if(isset($banner->imagem_mobile) && $banner->imagem_mobile != '')
                                    <div class="imagem_atual-mobile" style="background-image: url({{$banner->imagem_mobile}}); background-repeat: no-repeats"></div>
                                    @endif
                                    <div class="dropzone" id="foto-mobile-banner-dropzone" action="assets/lib/dropzone/upload.php">
                                        <div class="dz-message">
                                            <div class="icon">
                                                <span class="s7-cloud-upload"></span>
                                            </div>
                                            <h4>Arraste e solte a imagem aqui.</h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card-footer">
            <div class="text-inverse">
                <a href="/banners" class="btn btn-space btn-secondary" type="button">Cancelar</a>
                <button class="btn btn-space btn-primary sendForm" type="button">Salvar</button>
            </div>
        </div>
    </form>
    @endsection

    @section('modals')
    @endsection

    @section('javascript')
    <script src="{{ asset('assets/lib/moment.js/moment.js')}}" type="text/javascript"></script>
    <script src="{{ asset('assets/lib/moment.js/locale/pt-br.js')}}" type="text/javascript"></script>
    <script src="{{ asset('assets/lib/bootstrap-touchspin/jquery.bootstrap-touchspin.min.js')}}" type="text/javascript">
    </script>
    <script src="{{ asset('assets/lib/datepicker/js/bootstrap-datepicker.js')}}" type="text/javascript"></script>
    <script src="{{ asset('assets/lib/datepicker/locales/bootstrap-datepicker.pt-BR.min.js')}}" type="text/javascript"></script>
    <script src="{{ asset('assets/lib/dropzone/dropzone.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/lib/ui-confirm/duDialog.min.js')}}" type="text/javascript"></script>
    <script src="https://igorescobar.github.io/jQuery-Mask-Plugin/js/jquery.mask.min.js"></script>
    <script src="{{ asset('assets/js/pages/banners/banners_crud.js') }}" type="text/javascript"></script>
    @endsection