@extends('layouts.app')
@section('galery')
    <div class="inner-banner">
        <section class="w3l-breadcrumb">
            <div class="container">
                <h4 class="inner-text-title font-weight-bold text-white mb-sm-3 mb-2">N os réalisations</h4>
                <ul class="breadcrumbs-custom-path">
                    <li><a href="{{route('index')}}">Accueil</a></li>
                    <li class="active"><span class="fa fa-chevron-right mx-2" aria-hidden="true"></span>Réalisations</li>
                </ul>
            </div>
        </section>
    </div>
    <section class="galery">
        <ul>
            <li class="list active" data-filter="tous">Tous</li>
            <li class="list" data-filter="badge">Badge</li>
            <li class="list" data-filter="carte">Carte de visite</li>
            <li class="list" data-filter="kakemono">Kakemonos</li>
            <li class="list" data-filter="plaquette">Plaquettes</li>
            <li class="list" data-filter="chasuble">Chasubles</li>
            <li class="list" data-filter="flyers">Flyers</li>
            <li class="list" data-filter="gadget">Gadgets</li>
        </ul>
        <div class="produit">
            <div class="itemBox badge"><img src="assets/img/galery/badge1.jpg" alt=""></div>
            <div class="itemBox badge"><img src="assets/img/galery/badge2.jpg" alt=""></div>
            
            <div class="itemBox carte"><img src="assets/img/galery/carte1.jpg" alt=""></div>
            <div class="itemBox carte"><img src="assets/img/galery/carte2.jpg" alt=""></div>
            <div class="itemBox carte"><img src="assets/img/galery/carte3.jpg" alt=""></div>
            <div class="itemBox carte"><img src="assets/img/galery/carte4.jpg" alt=""></div>

            <div class="itemBox kakemono"><img src="assets/img/galery/kake1.jpg" alt=""></div>
            <div class="itemBox kakemono"><img src="assets/img/galery/kake2.jpg" alt=""></div>
            <div class="itemBox kakemono"><img src="assets/img/galery/kake3.jpg" alt=""></div>

            <div class="itemBox plaquette"><img src="assets/img/galery/plaquette1.jpg" alt=""></div>
            <div class="itemBox plaquette"><img src="assets/img/galery/plaquette2.jpg" alt=""></div>

            <div class="itemBox chasuble"><img src="assets/img/galery/chasuble.jpg" alt=""></div>

            
            <div class="itemBox flyers"><img src="assets/img/galery/flyer1.jpg" alt=""></div>
            <div class="itemBox flyers"><img src="assets/img/galery/flyer2.jpg" alt=""></div>
            <div class="itemBox flyers"><img src="assets/img/galery/flyer3.jpg" alt=""></div>

            <div class="itemBox gadget"><img src="assets/img/galery/gadge.jpg" alt=""></div>
        </div>
    
    </section>
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('.list').click(function(){
                const value = $(this).attr('data-filter');
                if (value == 'tous'){
                    $('.itemBox').show('1000');
                }
                else{
                    $('.itemBox').not('.'+value).hide('1000');
                    $('.itemBox').filter('.'+value).show('1000');
                }
            })
            $('.list').click(function(){
                $(this).addClass('active').siblings().removeClass('active');
            })
        })        
        
    </script>
@endsection