|
| 1 | +@extends('layouts.app') |
| 2 | +@section('title','Assitente') |
| 3 | +@include('partials.botman') |
| 4 | +@php |
| 5 | +$month = now()->monthName; |
| 6 | +$days = \Carbon\CarbonPeriod::create(now()->firstOfMonth(),now()->lastOfMonth()); |
| 7 | +$weekDays = ['Dom','Seg','Ter','Qua','Qui','Sex','Sab']; |
| 8 | +@endphp |
| 9 | +@section('content') |
| 10 | + <div class="antialiased sans-serif "> |
| 11 | + <div class="mx-auto container px-4"> |
| 12 | + <div class="min-h-screen bg-gray-100 py-6 flex flex-col justify-center sm:py-12"> |
| 13 | + <div x-data="{day : null}" class="flex flex-wrap sm:max-w-xl divide-x-2 sm:mx-auto"> |
| 14 | + <div class="z-20 relative bg-white sm:rounded-l p-2 shadow"> |
| 15 | + <div class="grid grid-cols-7 grid-rows-7 gap-6"> |
| 16 | + <div class="col-span-7 flex justify-between"> |
| 17 | + <div><svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg></div> |
| 18 | + <div>{{$month}}</div> |
| 19 | + <div><svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div> |
| 20 | + </div> |
| 21 | + <div class="col-span-7 flex justify-between"> |
| 22 | + @foreach ($weekDays as $weekDay) |
| 23 | + <div>{{$weekDay}}</div> |
| 24 | + @endforeach |
| 25 | + </div> |
| 26 | + @foreach($days as $index => $day) |
| 27 | + <div x-on:click="day = {{$index}}" class="{{$day->isToday() ? 'text-blue-500' : '' }} px-1 hover:bg-gray-500 rounded-full text-center">{{$day->day}}</div> |
| 28 | + @endforeach |
| 29 | + </div> |
| 30 | + </div> |
| 31 | + <div x-show="day" |
| 32 | + x-transition:enter="transform transition ease-in-out duration-500 sm:duration-700" |
| 33 | + x-transition:enter-start="-translate-x-full" |
| 34 | + x-transition:enter-end="translate-x-0" |
| 35 | + x-transition:leave="transform transition ease-in-out duration-500 sm:duration-700" |
| 36 | + x-transition:leave-start="translate-x-0" |
| 37 | + x-transition:leave-end="-translate-x-full" |
| 38 | + class="z-10 relative px-4 py-10 bg-white sm:rounded-r sm:p-20"> |
| 39 | + </div> |
| 40 | + </div> |
| 41 | + </div> |
| 42 | + </div> |
| 43 | + </div> |
| 44 | + @push('body-script') |
| 45 | + <script type="text/javascript"> |
| 46 | + function calendar(){ |
| 47 | + return { |
| 48 | + date : new Date(), |
| 49 | +
|
| 50 | + } |
| 51 | + } |
| 52 | + </script> |
| 53 | + @endpush |
| 54 | +@endsection |
| 55 | + |
0 commit comments